1 <html> 2 <head> 3 <meta charset='utf-8'> 4 <script src="js/angular.js"></script> 5 <script src="js/app.js"></script> 6 <link rel="stylesheet" href="css/bootstrap.css"> 7 </head> 8 <body ng-app="MyApp"> 9 <div ng-controller="PaginationCtrl"> 10 <table class="table table-striped"> 11 <thead> 12 <tr> 13 <th>Id</th> 14 <th>Name</th> 15 <th>Description</th> 16 </tr> 17 </thead> 18 <tbody> 19 <tr ng-repeat="item in items | offset: currentPage*itemsPerPage | limitTo: itemsPerPage"> 20 <td>{{item.id}}</td> 21 <td>{{item.name}}</td> 22 <td>{{item.description}}</td> 23 </tr> 24 </tbody> 25 <tfoot> 26 <td colspan="3"> 27 <div class="pagination"> 28 <ul> 29 <li ng-class="prevPageDisabled()"> 30 <a href ng-click="prevPage()">« Prev</a> 31 </li> 32 <li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)"> 33 <a href="#">{{n+1}}</a> 34 </li> 35 <li ng-class="nextPageDisabled()"> 36 <a href ng-click="nextPage()">Next »</a> 37 </li> 38 </ul> 39 </div> 40 </td> 41 </tfoot> 42 </table> 43 </div> 44 </body> 45 </html>
1 var app = angular.module("MyApp", []); 2 3 app.filter('offset', function() { 4 return function(input, start) { 5 start = parseInt(start, 10); 6 return input.slice(start); 7 }; 8 }); 9 10 app.controller("PaginationCtrl", function($scope) { 11 12 $scope.itemsPerPage = 5; 13 $scope.currentPage = 0; 14 $scope.items = []; 15 16 for (var i=0; i<50; i++) { 17 $scope.items.push({ id: i, name: "name "+ i, description: "description " + i }); 18 } 19 20 $scope.range = function() { 21 var rangeSize = 5; 22 var ret = []; 23 var start; 24 25 start = $scope.currentPage; 26 if ( start > $scope.pageCount()-rangeSize ) { 27 start = $scope.pageCount()-rangeSize+1; 28 } 29 30 for (var i=start; i<start+rangeSize; i++) { 31 ret.push(i); 32 } 33 return ret; 34 }; 35 36 $scope.prevPage = function() { 37 if ($scope.currentPage > 0) { 38 $scope.currentPage--; 39 } 40 }; 41 42 $scope.prevPageDisabled = function() { 43 return $scope.currentPage === 0 ? "disabled" : ""; 44 }; 45 46 $scope.pageCount = function() { 47 return Math.ceil($scope.items.length/$scope.itemsPerPage)-1; 48 }; 49 50 $scope.nextPage = function() { 51 if ($scope.currentPage < $scope.pageCount()) { 52 $scope.currentPage++; 53 } 54 }; 55 56 $scope.nextPageDisabled = function() { 57 return $scope.currentPage === $scope.pageCount() ? "disabled" : ""; 58 }; 59 60 $scope.setPage = function(n) { 61 $scope.currentPage = n; 62 }; 63 64 });