模仿百度的每页显示10条数据, 实现了当前页居中的算法.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BootStrap+AngularJS分页显示 </title> <script type="text/javascript" src="https://www.jb51.net/js/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap.js"></script> <link href="https://www.jb51.net/css/bootstrap/bootstrap.css" /> <script type="text/javascript" src="https://www.jb51.net/js/angular.min.js"></script> </head> <body ng-app="paginationApp" ng-controller="paginationCtrl"> <table> <tr> <th>序号</th> <th>商品编号</th> <th>名称</th> <th>价格</th> </tr> <tr ng-repeat="product in products"> <td>{{$index+1}}</td> <td>{{product.id}}</td> <td>{{product.name}}</td> <td>{{product.price}}</td> </tr> </table> <div> <ul> <li> <a href ng-click="prev()">上一页</a> </li> <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}"> <a href ng-click="selectPage(page)">{{page}}</a> </li> <li> <a href ng-click="next()">下一页</a> </li> </ul> </div> </body> <script type="text/javascript "> var paginationApp = angular.module("paginationApp", []); paginationApp.controller("paginationCtrl", ["$scope", "$http", function($scope, $http) { // 分页组件 必须变量 $scope.currentPage = 1; // 当前页 （请求数据） $scope.pageSize = 4; // 每页记录数 （请求数据） $scope.totalCount = 0; // 总记录数 （响应数据） $scope.totalPages = 0; // 总页数 （根据 总记录数、每页记录数 计算 ） // 要在分页工具条显示所有页码 $scope.pageList = new Array(); // 加载上一页数据 $scope.prev = function(){ $scope.selectPage($scope.currentPage-1); } // 加载下一页数据 $scope.next = function(){ $scope.selectPage($scope.currentPage+1); } // 加载指定页数据 $scope.selectPage = function(page) { // page 超出范围 if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)){ return ; } $http({ method: 'GET', url: '6_'+page+'.json', params: { "page" : page , // 页码 "pageSize" : $scope.pageSize // 每页记录数 } }).success(function(data, status, headers, config) { // 显示表格数据 $scope.products = data.products; // 根据总记录数 计算 总页数 $scope.totalCount = data.totalCount; $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize); // 更新当前显示页码 $scope.currentPage = page ; // 显示分页工具条中页码 var begin ; // 显示第一个页码 var end ; // 显示最后一个页码 // 理论上 begin 是当前页 -5 begin = $scope.currentPage - 5 ; if(begin < 1){ // 第一个页码 不能小于1 begin = 1 ; } // 显示10个页码，理论上end 是 begin + 9 end = begin + 9; if(end > $scope.totalPages ){// 最后一个页码不能大于总页数 end = $scope.totalPages; } // 修正begin 的值, 理论上 begin 是 end - 9 begin = end - 9; if(begin < 1){ // 第一个页码 不能小于1 begin = 1 ; } // 要在分页工具条显示所有页码 $scope.pageList = new Array(); // 将页码加入 PageList集合 for(var i=begin ; i<= end ;i++){ $scope.pageList.push(i); } }).error(function(data, status, headers, config) { // 当响应以错误状态返回时调用 alert("出错，请联系管理员 "); }); } // 判断是否为当前页 $scope.isActivePage = function(page) { return page === $scope.currentPage; } // 初始化，选中第一页 $scope.selectPage(1); } ]); </script> </html>
1_1.json
{ "totalCount":100, "products":[ {"id":"1001","name":"苹果手机","price":"5000"}, {"id":"1002","name":"三星手机","price":"6000"} ] }
1_2.json
{ "totalCount":100, "products":[ {"id":"1001","name":"华为手机","price":"5000"}, {"id":"1002","name":"vivo手机","price":"6000"} ] }
实现的效果如图:
遇到的问题 : 下面的代码, 如果 把begin不小心写成了0 , 则页码上,会出现从0开始的bug
// 将页码加入 PageList集合 for(var i=begin ; i<= end ;i++){ $scope.pageList.push(i); }
如下图所示
原因是begin代表的是页面显示的第一个页码, 如果i从0开始开始遍历, 那么pageList数组中的第一个元素就是0 ,因此在如下的angularJS的遍历页码的过程中, 就会从0开始遍历. 在页面上, 就会显示从0 开始
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}"> <a href ng-click="selectPage(page)">{{page}}</a> </li>