Django - Pagination - Bootstrap 4 ne s'applique pas
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:
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:
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:
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}}">«</a></li>
{% else %}
<li class="disable"><span>«</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}}">»</a></li>
{% else %}
<li class="page-item"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
</nav> |
base.html :
Code:
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> |
