1.HTML 代码
<div class="sui-pagination pagination-large top-pages">
<ul>
<li class="prev {{isTopPage()?'disabled':''}}"><a href="#" ng-click="queryByPage(searchMap.pageNo-1)">«上一页</a></li>
<li ng-repeat="p in pageLabel">
<a href="#" ng-click="queryByPage(p)">{{p}}</a>
</li>
<li class="dotted" ng-if="firstDot==true"><span>...</span></li>
<li class="dotted" ng-if="lastDot==true"><span>...</span></li>
<li class="next {{isEndPage()?'disabled':''}}"><a href="#" ng-click="queryByPage(searchMap.pageNo+1)">下一页»</a></li>
</ul>
<div><span>共{{totalPages}}页 </span><span> 到
<input type="text" ng-model="searchMap.pageNo" class="page-num"><button class="page-confirm" ng-click="queryByPage(searchMap.pageNo)">确定</button> 页</span></div>
</div>
2.AngularJs代码
//1. 搜索条件封装对象
$scope.searchMap={pageNo:1,pageSize:10,status:""};
//2. 构建分页标签
buildPageLabel=function(){
//获取页码
if ($scope.resultMap.total!=0){
if (($scope.resultMap.total)%($scope.searchMap.pageSize)==0){
//整除
$scope.totalPages=($scope.resultMap.total)/($scope.searchMap.pageSize);
} else{
//有余数 向上取整
$scope.totalPages=Math.ceil(($scope.resultMap.total)/($scope.searchMap.pageSize));
}
}
$scope.pageLabel=[];//新增分页栏属性
var maxPageNo= $scope.totalPages;//得到最后页码
var firstPage=1;//开始页码
var lastPage=maxPageNo;//截止页码
$scope.firstDot=true;//前面有点
$scope.lastDot=true;//后边有点
if($scope.totalPages> 5){ //如果总页数大于5页,显示部分页码
if($scope.searchMap.pageNo<=3){//如果当前页小于等于3
lastPage=5; //前5页
$scope.firstDot=false;//前面没点
}else if( $scope.searchMap.pageNo>=lastPage-2 ){//如果当前页大于等于最大页码-2
firstPage= maxPageNo-4; //后5页
$scope.lastDot=false;//后边没点
}else{ //显示当前页为中心的5页
firstPage=$scope.searchMap.pageNo-2;
lastPage=$scope.searchMap.pageNo+2;
}
}else {
$scope.firstDot=false;//前面无点
$scope.lastDot=false;//后边无点
}
//循环产生页码标签
for(var i=firstPage;i<=lastPage;i++){
$scope.pageLabel.push(i);
}
}
//3. 根据页码查询
$scope.queryByPage=function(pageNo){
//页码验证
if(pageNo<1 || pageNo>$scope.resultMap.total){
return;
}
$scope.searchMap.pageNo=pageNo;
$scope.searchUserOrder();
}
//4.1 判断当前页为第一页
$scope.isTopPage=function(){
if($scope.searchMap.pageNo==1){
return true;
}else{
return false;
}
}
//4.2 判断当前页是否未最后一页
$scope.isEndPage=function(){
if($scope.searchMap.pageNo==$scope.totalPages){
return true;
}else{
return false;
}
}
//5. 分页查询用户订单
$scope.searchUserOrder=function(){
//定义map封装请求参数
if ($scope.status==null){
$scope.searchMap.status="";
} else{
$scope.searchMap.status=$scope.status;
}
orderService.searchUserOrder($scope.searchMap).success(function (response) {
$scope.resultMap=response;
$scope.list=response.rows;
$scope.resultMap.total=response.total;
buildPageLabel();
})
$scope.selectIds=[];
};