Angularjs 实现分页

一，HTML

toRequest（page）：根据页码发送请求的函数；

toIndex()：跳转到首页；

prePage()：上一页；

nextPage()：下一页；

toLast()：跳转到尾页；

用户点击触发的是toRequest（page），会获取他所点击的页码，然后进行跳转。

<div class="paging row">                     <div class="col-md-5">                         <div>                             <span> 总记录：{{count}} 条数据</span>                             <span> 页次：{{current}}/{{maxPage}} </span>                         <#--<span> 跳转：</span>-->                         </div>                         <div class="input-group col-md-4">                             <input type="number" class="form-control" min="1" ng-model="inputPage" >                             <span class="input-group-addon" ng-click="toRequest(inputPage)">确定</span>                         </div>                     </div>                     <div class="col-md-7">                         <ul class="pagination pull-right" >                             <li ng-class="{true:'disabled'}[current==1]"><a href="javascript:;" ng-click="toIndex()" class="pagingNoCss">首页</a></li>                             <li ng-class="{true:'disabled'}[current==1]"><a href="javascript:;" ng-click="prePage()" class="pagingNoCss">上一页</a></li>                             <li ng-repeat="page in pages" ng-class="{true:'active'}[current==page]"><a href="javascript:void(0);" ng-click="toRequest(page)" class="pagingNub">{{ page }}</a></li>                             <li ng-class="{true:'disabled'}[current==maxPage]"><a href="javascript:;" ng-click="nextPage()" class="pagingNoCss">下一页</a></li>                             <li ng-class="{true:'disabled'}[current==maxPage]"><a href="javascript:;" ng-click="toLast()" class="pagingNoCss">尾页</a></li>                         </ul>                     </div>                 </div>

二，分页算法函数

pages []：是要在html中遍历出页码的数组；

current ：当前页码；

inputPage：用户输入的页码，用于直接跳转

函数中的三个参数：

current ：当前页码（要去的页码，将会在中央高亮显示的页码）；

length：总页码数；

displayLength：页面上要显示的页码数；

start ：用于遍历生成pages数组的起始页码；

end ：用于遍历生成pages数组的结束页码；

 //配置         $scope.pages = [];         $scope.pageInfo = {};         $scope.current = 1;         $scope.inputPage = 1;          //分页算法         $scope.calculateIndexes = function (current, length, displayLength) {             $scope.pages = [];              // 普通情况，页数中没有首页和尾页             var start = Math.round(current - displayLength / 2);             var end = Math.round(current + displayLength / 2)-1;              //页数中有首页             if (start <1) {                 // console.log(start+"小于1")                 start = 1;                 // 默认显示的最后一个数字为设置的页码显示长度                 end = displayLength;                 if (end >= length) {                     // console.log(end+"Da于"+length)                      // 短于设置的页码数，则为其本身长度                     end = length;                 }              }else if(end >= length){                 //页数中有尾页                 //     console.log(end+"大于等于"+length)                 end = length;                 start = end - displayLength + 1;                 if (start <= 1) {                     start = 1;                 }              }              // 遍历生成数组             for (var i = start; i <= end; i++) {                 $scope.pages.push(i);             }             //             // console.log(current)             // console.log(length)             // console.log(start)             // console.log(end)             // console.log($scope.pages)         };

三，其他函数

reloadPno （）：初始化页码函数，每次在请求完成，后台数据返回的时候调用

这时候会传入三个值：$scope.current（要跳转的页码），$scope.maxPage（最大页数），5（展示的页码数）

 //首页     $scope.toIndex = function(){         $scope.toRequest(1);     }     //尾页     $scope.toLast = function(){         $scope.toRequest($scope.maxPage);     }     //上一页     $scope.prePage=function(){         $scope.toRequest($scope.current-1);     }     //下一页     $scope.nextPage=function(){         $scope.toRequest($scope.current+1);     }     //初始化页码     $scope.reloadPno = function(){         $scope.calculateIndexes($scope.current,$scope.maxPage,5);         // console.log($scope.pages);     };

文章来源: Angularjs 实现分页