如何在UI Bootstrap分页中禁用下一页按钮？

Question

我正在尝试在我的页面中创建分页，并使用分页控件。一切都运行良好，但唯一的疑问是如何手动禁用下一个按钮。

<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;     
                  };

在每次页面更改时调用下一页和上一页。我错过了什么或如何手动禁用nextlink？或者在这种情况下datepicker将如何工作？

是的，每次点击下一页或上一页按钮时，我都会进行API请求，因为Cassandra对分页的支持非常有限。因此，每次查询都会使用存储的stringId来过滤结果，因为它们在Cassandra表中存储为有序列表。因此，我在这里做的更像是服务器端的分页。

- JOGO

---

你如何使用 '$scope.numberofrows =5;'？ - shershen

你的意思是无论如何都希望“下一个”按钮一直处于禁用状态吗？ - shershen

由于我知道一开始查询了6行，然后对于其余的页面查询5行，而每页显示5个项目，所以我总是知道有更多的数据可用。假设服务器上总共有23行可用，那么根据我的逻辑，在着陆页面上我将获得6行，即（第1页=5行），对于第2页，我将再次查询行数=5。因此，在第5次请求时，一旦显示了所有23个结果，我必须禁用下一页按钮。 - JOGO

Answer 1

UI Bootstrap会在没有要显示的页面时自动禁用下一个链接。您无需使用ng-change来禁用分页项。如果需要其他处理程序，例如确认或ajax请求，则应使用它们。

您可以按照以下公式进行检查：

totalItems / temsPerPage - maxSize

- shershen