Django - Pagination - Bootstrap 4 ne s'applique pas

**OZ1977** · 21/09/2019, 17h44

Bonjour,

je souhaite utiliser bootstrap 4 avec Django pour le mise en forme de la pagination
et je ne comprends pas pourquoi le style de s'applique pas

dans la même page, j'utilise un tableau mis en forme en bootstrap 4 sans problème
la pagination fonctionne mais le style css bootstrap ne s'applique pas
pourtant j'importe bien bootstrap dans ma vue base.html

j'ai essayé de relancer le serveur, changer de navigateur,etc. mais çà ne fonctionne pas
d'avance merci pour votre aide

page index.html :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{% extends 'layouts/base.html' %}
{% block title %}Monitorage{% endblock %}
{% block content %}
 
<div class='container'>
			<!--<p>
				{{query.patient_number}} / 
				{{query.description}} / 
				<input type="checkbox" id="id" name="id">
  				<label for="id">Non récupérable</label>
 
			</p>-->		
		<table class="table table-stripped table-hover">
			<thead>
				<tr>
					<th>Id</th>
					<th>Patient number</th>
					<th>Description</th>
				</tr>
			</thead>
			<tbody>
		{% for query in queries %}
 
				<tr>
					<td>{{query.patient_number}}</td>
					<td>{{query.description}}</td>
					<td>
						<input type="checkbox" id="id" name="id">
  						<label for="id">Non récupérable</label>
  					</td>
				</tr>				
 
		{% if not forloop.last %}
 
		{% endif %}
 
		{% empty %}
			<p>No query</p>
		{% endfor %}
			</tbody>		
		</table>
		{% include 'monitor/_paginator.html' with page=queries %}
</div>
{% endblock %}

views.html :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{% extends 'layouts/base.html' %}
{% block title %}Monitorage{% endblock %}
{% block content %}
 
<div class='container'>
			<!--<p>
				{{query.patient_number}} / 
				{{query.description}} / 
				<input type="checkbox" id="id" name="id">
  				<label for="id">Non récupérable</label>
 
			</p>-->		
		<table class="table table-stripped table-hover">
			<thead>
				<tr>
					<th>Id</th>
					<th>Patient number</th>
					<th>Description</th>
				</tr>
			</thead>
			<tbody>
		{% for query in queries %}
 
				<tr>
					<td>{{query.patient_number}}</td>
					<td>{{query.description}}</td>
					<td>
						<input type="checkbox" id="id" name="id">
  						<label for="id">Non récupérable</label>
  					</td>
				</tr>				
 
		{% if not forloop.last %}
 
		{% endif %}
 
		{% empty %}
			<p>No query</p>
		{% endfor %}
			</tbody>		
		</table>
		{% include 'monitor/paginator.html' with page=queries %}
</div>
{% endblock %}

paginator.html :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav aria-label="Page navigation">
	{% if page.has_other_pages %}
		<ul class="pagination">
			{% if page.has_previous %}
				<li class="page-item"><a aria-label="Previous" href="?page={{page.previous_page_number}}">&laquo;</a></li>
			{% else %}
				<li class="disable"><span>&laquo;</span></li>
			{% endif %}
			{% for pages in page.paginator.page_range %}
				{% if page.number == pages %}
					<li class="active"><span>{{pages}}<span class="sr-only">(current)</span></span></li>
				{% else %}
					<li><a href="?page={{pages}}">{{pages}}</a></li>
				{% endif %}
			{% endfor %}
			{% if page.has_next %}
				<li><a aria-label="Next" href="?page={{page.next_page_number}}">&raquo;</a></li>
			{% else %}
				<li class="page-item"><span>&raquo;</span></li>
			{% endif %}
		</ul>
	{% endif %}
</nav>

base.html :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{% load static %}
{% load widget_tweaks %}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>{% block title %}Mereva{% endblock %}</title>
    <style type="text/css">
      .asteriskField{
        display: none;
      }
      form .alert ul li{
        list-style: none;
      }
      form .alert ul {
        margin:0;
        padding: 0;
      }
      body > div > div.col-6 > div > div > h2 {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    {% include 'layouts/_nav.html' %}     
    {% block content %}{% endblock %}
    <!--{% include 'layouts/_footer.html' %}-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

**fred1599** · 21/09/2019, 23h53

Bonsoir,

Avez-vous respecter la première page du tuto sur Bootstrap ?

**OZ1977** · 22/09/2019, 10h05

Bonjour,

en fait je n'avais pas du tout compris
je n'ai pas installé l'appli django-boostrap4
je pensais que je pouvais utiliser bootstrap simplement en ayant chargé la librairie dans ma page base.html...

je suis un peu perdu, je vais lire la doc django-boostrap4

merci

**fred1599** · 22/09/2019, 17h05

On peut faire sans l'application, c'est moi qui pensait que vous utilisiez cette méthode, je n'ai pas regardé en détails le template proposé.

Pour le css, vous devez tout de même y ajouter quelques lignes, voir le tutoriel Bootstrap

**OZ1977** · 22/09/2019, 18h09

je n'y comprends rien
j'ai bien ajouté le "link" bootstrap et il s'applique sur les autres styles
par exemple, je peut faire un bouton bootstrap btn btn-primary ou btn btn-warning...

mais les classes pagination, page item... ne s'appliquent pas !

Django - Pagination - Bootstrap 4 ne s'applique pas

Django Python

Vue hybride

Discussions similaires

Partager

Partager