Bonjour,
J'aimerais mettre en place une pagination sur un tableau de données mais sans succès...
Voici le code de ma page 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 <table class="table table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Description</th> </tr> </thead> <tbody> <tr ng-repeat="item in items | filter:offset | limitTo:itemsPerPage"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.description}}</td> </tr> </tbody> <tfoot> <td colspan="3"> <div class="pagination"> <ul> <li ng-class="prevPageDisabled()"> <a href="" ng-click="prevPage()">« Prev</a> </li> <li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)"> <a href="#">{{n+1}}</a> </li> <li ng-class="nextPageDisabled()"> <a href="" ng-click="nextPage()">Next »</a> </li> </ul> </div> </td> </tfoot> </table>
Et voici le code JS :
Je pense que le problème viens de mon filtre offset ! Pouvez-vous m'aider, s'il vous plait ? ^^
Code : 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 $scope.itemsPerPage = 10; $scope.currentPage = 0; $scope.items = []; for (var i=0; i<30; i++) { $scope.items.push({ id: i, name: "name "+ i, description: "description " + i }); } $scope.offset = function() { $scope.itemsPerPage = parseInt($scope.itemsPerPage, 10); return $scope.currentPage.slice($scope.itemsPerPage); }; $scope.prevPage = function() { if ($scope.currentPage > 0) { $scope.currentPage--; } }; $scope.prevPageDisabled = function() { return $scope.currentPage === 0 ? "disabled" : ""; }; $scope.pageCount = function() { return Math.ceil($scope.items.length/$scope.itemsPerPage)-1; }; $scope.nextPage = function() { if ($scope.currentPage < $scope.pageCount()) { $scope.currentPage++; } }; $scope.nextPageDisabled = function() { return $scope.currentPage === $scope.pageCount() ? "disabled" : ""; };
Partager