如图:
之前的版本,分页存在一些bug,修改每页分页条数小于5的时候,页面条会有问题,现在已经修复,发布最新的完整的成果。
<p>每页显示<input type="text" ng-model="pagenum" />条数 <span style="float: right;">搜索:<input type="text" ng-model="txt" ng-blur=""></span></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 pull-right"> <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>
js代码:
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'} ];
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,$filter){ $scope.pagenum = 5 var showData = data $scope.$watch('txt',function(n,o){ if(n==''){ showData = data; }else{ showData = $filter('filter')(data,n); } $scope.getPages(1); }); $scope.$watch('pagenum',o){ $scope.getPages(1); }); $scope.getPages = function(page){ var size = showData.length; $scope.totalPages = size%$scope.pagenum==0?(size/$scope.pagenum):Math.ceil(size/$scope.pagenum); var firspage=0,endpage=0; if(page<5){ console.log('第一项'); firspage = 1; endpage = 5>$scope.totalPages?$scope.totalPages:5; }else{ var index = $scope.totalPages-page; if(index<(4)){ console.log('第二项'); firspage = $scope.totalPages-4; endpage = $scope.totalPages; }else{ console.log('第三项'); firspage = page-2; endpage = page+2; } } $scope.pages = getPages(0,firspage,endpage,5); $scope.page = page; var indexS = ($scope.page-1)*$scope.pagenum; var indexE = parseInt(indexS)+parseInt($scope.pagenum); var indexEnd = indexE>showData.length?showData.length:indexE; var tableD = [] for(var s=indexS;s<indexEnd;s++){ tableD.push(showData[s]); } $scope.data = tableD; } $scope.getPages(1); });
项目源码下载地址:https://download.csdn.net/download/xq30397022/10367892 点击打开链接