pagination à l'aide de bootstrap(symfony)
salut
je veux réaliser une pagination de mes données dans la base de données
le probleme ici que j'ai plusieurs données dans BD mais comme vous voyez dans le code ci-dessous
je fais alert(nbr) pour afficher le nbr des normalement mais j'obtient 1
voici mon fichier twig:
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| {% extends 'GestiongestionBundle::layout.html.twig' %}
{% block body -%}
{{ parent() }}
<div class="container">
<form action="{{path('personnel_search')}}" method="POST">
<div class="form-group">
<div class="col-lg-4">
<input class="form-control" type="text" name="nom" placeholder="Enter nom">
</div>
</div>
<div class="form-group">
<div class="col-lg-4">
<input class="form-control" type="text" name="prenom" placeholder="Enter prenom">
</div>
</div>
<div class="col-lg-4"><input type="submit" value="Rechercher"></div>
</form>
</div>
<div class="container">
<h1>Personnel list</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>NomPersonnel</th>
<th>PrenomPersonnel</th>
<th>Specialite</th>
<th>Adress</th>
<th>telephone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<div id="content">
{% for entity in entities %}
<div>
<tr>
<td><a href="{{ path('personnel') }}">{{ entity.id }}</a></td>
<td>{{ entity.nomPersonnel }}</td>
<td>{{ entity.prenomPersonnel }}</td>
<td>{{ entity.adress }}</td>
<td>{{ entity.specialite }}</td>
<td>{{ entity.telephone }}</td>
<td>
<ul>
<li>
<a href="{{ path('personnel_show', { 'id': entity.id }) }}">Voir</a>
</li>
<li>
<a href="{{ path('personnel_edit', { 'id': entity.id }) }}">Modifier</a>
</li>
<li>
<a href="{{ path('personnel_delete', { 'id': entity.id }) }}">Suprimer</a>
</li>
</ul>
</td>
</tr>
</div>
{% endfor %}
</div>
<div id="page_navigation"> </div>
</tbody>
</table>
<a class="btn btn-success" href="{{ path('personnel_new') }}">créer nouveau Personnel</a>
</div>
<script src="{{ asset('bootstrap.js') }}" ></script>
<script src="{{ asset('jquery.min.js') }}" ></script>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('bootstrap.js') }}" ></script>
<script src="{{ asset('jquery.min.js') }}" ></script>
<script>
var show_per_page = 1;
var current_page = 0;
function set_display(first, last) {
$('#content').children().css('display', 'none');
$('#content').children().slice(first, last).css('display','block');
}
function previous(){
if($('.active').prev('.page_link').length) go_to_page(current_page - 1);
}
function next(){
if($('.active').next('.page_link').length) go_to_page(current_page + 1);
}
function go_to_page(page_num){
current_page = page_num;
start_from = current_page * show_per_page;
end_on = start_from + show_per_page;
set_display(start_from, end_on);
$('.active').removeClass('active');
$('#id' + page_num).addClass('active');
}
$(document).ready(function() {
var nbr = $('#content > *').length;
alert(nbr);
var number_of_pages =nbr / show_per_page;
var nav = '<ul class="pagination"><li><a href="javascript:previous();"><<</a>';
var i = -1;
while(number_of_pages > ++i){
nav += '<li class="page_link'
if(!i) nav += ' active';
nav += '" id="id' + i +'">';
nav += '<a href="javascript:go_to_page(' + i +')">'+(i + 1)+'</a>';
}
nav += '<li><a href="javascript:next();">>></a></ul>';
$('#page_navigation').html(nav);
set_display(0, show_per_page);
});
</script>
<script>
$(function() {
$('#2').addClass('active');
});
</script>
{% endblock %} |
