纯AngularJs实现分页查询,不使用分页插件

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}}页&nbsp;</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=[];
    };