如何禁用ui bootstrap分页中的下一个按钮？

问题描述：

我想在我的页面中创建分页并使用分页控件。一切工作正常，但唯一的疑问是如何手动禁用此如何禁用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表中。所以这更像是服务器端分页在这里做的。

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

你的意思是你想要'下一步'按钮始终禁用，不管是什么？ – shershen

因为我总是知道有更多的数据可用，因为我第一次查询6行，然后5查询其余的页面，并且itemperpage是5.假设我在服务器中有23行可用，所以使用我的逻辑在着陆页上，我会得到6行，意味着（第一页= 5行）和第二页再次我会查询行数= 5，所以在第5次请求一旦所有23结果显示那里我必须禁用我的下一个按钮 – JOGO

答

如果没有页面显示，UI boortstrap将自动禁用下一个链接。您不需要使用ng-change来禁用分页项目。如果您需要它们，我会为其他处理程序服务，例如确认或ajax请求。您可以通过以下公式检查：

totalItems/temsPerPage - maxSize

如何禁用ui bootstrap分页中的下一个按钮？

相关推荐