一,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);
};