代码实现：
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> </head> <body ng-app="myApp" ng-controller="ctr1" class="container" style="margin-top: 100px;"> <p>每页显示<input type="text" ng-model="pagenum" ng-blur="getPages(1)"/>条数 </p> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>NAME</th> </tr> </thead> <tbody> <tr ng-repeat="v in data"> <td>{{v.id}}</td> <td>{{v.name}}</td> </tr> </tbody> </table> <ul class="pagination"> <li ng-class="{disabled:1==page}"><a href="#" ng-click="getPages(page-1<1?1:page-1)">«</a></li> <li ng-repeat="item in pages" ng-class="{active:item==page}"><a href="#" ng-click="getPages(item)" >{{item}}</a></li> <li ng-class="{disabled:totalPages==page}"><a href="#" ng-click="getPages(page+1>totalPages?totalPages:page+1)">»</a></li> </ul> <script> var data=[{id:1,name:'name1'},{id:2,name:'name2'},{id:3,name:'name3'},{id:4,name:'name4'},{id:5,name:'name5'},{id:6,name:'name6'},{id:7,name:'name7'},{id:8,name:'name8'},{id:9,name:'name9'},{id:10,name:'name10'},{id:11,name:'name11'},{id:12,name:'name12'},{id:13,name:'name13'},{id:14,name:'name14'},{id:15,name:'name15'},{id:16,name:'name16'},{id:17,name:'name17'},{id:18,name:'name18'},{id:19,name:'name19'},{id:20,name:'name20'},{id:21,name:'name21'},{id:22,name:'name22'},{id:23,name:'name23'},{id:24,name:'name24'},{id:25,name:'name25'},{id:26,name:'name26'},{id:27,name:'name27'},{id:28,name:'name28'},{id:29,name:'name29'},{id:30,name:'name30'},{id:31,name:'name31'},{id:32,name:'name32'} ]; var app = angular.module('myApp',[]); function getPages(currentpage,firstPage,endPage,pageNum){ var pages = []; console.log("f:"+firstPage);console.log("e:"+endPage); for(var i=firstPage;i<=endPage;i++){ pages.push(i); } console.log(pages); return pages; } app.controller('ctr1',function($scope){ var size = data.length; $scope.pagenum = 5 $scope.getPages = function(page){ $scope.totalPages = size%$scope.pagenum==0?(size/$scope.pagenum):Math.ceil(size/$scope.pagenum); var firspage=0,endpage=0; if(page<$scope.pagenum){ firspage = 1; endpage = $scope.pagenum>$scope.totalPages?$scope.totalPages:$scope.pagenum; }else{ var index = $scope.totalPages-page; if(index<($scope.pagenum-1)){ firspage = $scope.totalPages-($scope.pagenum-1); endpage = $scope.totalPages; }else{ firspage = page-(Math.ceil($scope.pagenum/2)); endpage = page+(Math.ceil($scope.pagenum/2)); } } $scope.pages = getPages(0,firspage,endpage,$scope.pagenum); $scope.page = page; var indexS = ($scope.page-1)*$scope.pagenum; var indexE = parseInt(indexS)+parseInt($scope.pagenum); var indexEnd = indexE>data.length?data.length:indexE; var tableD = [] for(var s=indexS;s<indexEnd;s++){ tableD.push(data[s]); } $scope.data = tableD; } $scope.getPages(1); }); </script> </body> </html>
