2016-03-05 69 views
4

我想在我的頁面中創建分頁並使用分頁控件。一切工作正常,但唯一的疑問是如何手動禁用此如何禁用ui bootstrap分頁中的下一個按鈕?

<pagination 
    total-items="totalItems" 
    items-per-page= "itemsPerPage" 
    ng-model="currentPage" 
    class="pagination-sm" 
    page="currentPage" 
    max-size= "maxSize" 
    ng-change="pageChanged(currentPage)"> 
</pagination> 

下一個按鈕在我的控制器 -

$scope.currentPage=1; 
$scope.itemsPerPage = 5; 
$scope.maxSize = 2; 
$scope.numberofrows =5; 

$scope.fetchResult =function(startingId){ 
        if(startingId ==undefined){ 
         $scope.StartingId = ''; 
        } 
        else{ 
         $scope.StartingId= startingId ; 
        } 
        Api.customerReq.queryProductbyperiod({ productId : $scope.customerProduct , productperiod :$scope.customerPeriod,startingid: $scope.StartingId,numberofrows:$scope.numberofrows}).$promise.then(function(result) { 
         if(result){ 
          if(result&&result.length==0){ 
           // error alert 
           } 
          $scope.customerResult = result; 
          if($scope.currentPage==1){ 
          $scope.NextStartingId = result[5].id; 
          // on landing page storing last stringId for the next request to cassandra since row num requested as 6. 
          } 
          else{ 
          $scope.NextStartingId = result[4].id; // rest of the page, row num requested as 5. 
          } 

        $scope.previousStartingId=$scope.NextStartingId; 
          if($scope.currentPage== 1){ 
           $scope.totalItems= result.length; 
          } 
$scope . pageChanged = function (page) { 
    if (page > $scope . count) 
    { 
     $scope . count ++; 
     // temp = page; 
     $scope . nextPage(); 
    } else 
    { 
     $scope . count = page; 
     $scope . prevPage(); 
    } 
}; 

       $scope.prevPage = function() { 
        if($scope.currentPage ==1){ 
         $scope.previousStartingId = ''; 
         } 
        $scope.fetchResult($scope.previousStartingId); 
        if($scope.currentpage>1) 
         $scope.totalItems -=5; 

       }; 
      $scope.nextPage = function() { 
       if($scope.currentPage!=1){ 
        $scope.numberofrows =5; 

       }        
       $scope.fetchResult($scope.NextStartingId); 

        $scope.totalItems +=5;  
        }; 

這裏呼籲下一個和以前頁面上的每個pagechange。我缺少什麼或如何手動禁用nextlink?或日期選擇器如何在這種情況下工作?

是的,我每次點擊next或prev按鈕時都會做api請求,因爲cassandra對分頁的支持非常有限。因此,每次使用存儲的stringId查詢時,都會按照有序列表的形式將結果存儲在Cassandra表中。所以這更像是服務器端分頁在這裏做的。

+0

您如何使用'$ scope.numberofrows = 5' ? – shershen

+0

你的意思是你想要'下一步'按鈕始終禁用,不管是什麼? – shershen

+0

因爲我總是知道有更多的數據可用,因爲我第一次查詢6行,然後5查詢其餘的頁面,並且itemperpage是5.假設我在服務器中有23行可用,所以使用我的邏輯在着陸頁上,我會得到6行,意味着(第一頁= 5行)和第二頁再次我會查詢行數= 5,所以在第5次請求一旦所有23結果顯示那裏我必須禁用我的下一個按鈕 – JOGO

回答

0

如果沒有頁面顯示,UI boortstrap將自動禁用下一個鏈接。您不需要使用ng-change來禁用分頁項目。如果您需要它們,我會爲其他處理程序服務,例如確認或ajax請求。 您可以通過以下公式檢查:

totalItems/temsPerPage - maxSize 
相關問題