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=[];
    };