简体   繁体   中英

AngularJS ng-grid pagination issue - Buttons are not disabled

I have the following code,

Demo: http://plnkr.co/edit/CIjY45LGDUviCXVWONLQ?p=preview

HTML

<body ng-controller="MyCtrl">
   <input type="text" ng-model="settings.filterOptions.filterText" />
   <div class="list" ng-grid="settings"></div>
</body>

JS

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $filter) {
  $scope.result = [];
  $scope.all_data = [..............];
  $scope.totalServerItems = 0;
  $scope.selectedItems = [];
  $scope.pagingOptions = {
          currentPage : 1,
          pageSize : 10
          };
  $scope.filterOptions = {
          filterText: '',
          useExternalFilter : true
          };
  if(!$scope.settings){
      $scope.settings = {
          enableColumnResize : true,
          pagingOptions : $scope.pagingOptions,
          filterOptions : $scope.filterOptions,
          sortInfo: {fields: [], columns: [], directions: [] },
          jqueryUITheme : true,
          enablePaging : true,
          useExternalSorting : true,
          showFooter : true,
          virtualizationThreshold: 100
      };
  }

  $scope.settings.data = 'result';
  $scope.settings.totalServerItems = 'totalServerItems';
  $scope.settings.selectedItems = $scope.selectedItems;

  $scope.$watch('pagingOptions', function (new_value, old_value) {
      if($scope.filterOptions.filterText != ''){
        return false;
      }
      var pagedData = $scope.all_data.slice((new_value.currentPage - 1) * new_value.pageSize , new_value.currentPage * new_value.pageSize);
      $scope.result = pagedData;
      $scope.totalServerItems = $scope.all_data.length;
      if (!$scope.$$phase) {
          $scope.$apply();
      }
  }, true);

  $scope.$watch('filterOptions', function (new_value, old_value) {
      if(new_value){
          $scope.result = $filter('filter')($scope.all_data, $scope.filterOptions.filterText);
          if (!$scope.$$phase) {
              $scope.$apply();
          }
      }
  }, true);
});

Problem

When I filter with some random keywords, the grid gets empty but the pagination buttons are not disabled, I can still click the remaining number of pages. Can someone explain me the problem?


UPDATE I fixed it by making a very small change in the filterOptions watch. Which looks like,

Demo http://plnkr.co/edit/ULLg6AuTBprMXEcR7eXC?p=preview

JS

$scope.$watch('filterOptions', function (new_value, old_value) {
      if(new_value){
          $scope.result = $filter('filter')($scope.all_data, $scope.filterOptions.filterText);
          $scope.totalServerItems = $scope.result.length; //This helped out to fix the issue
          if (!$scope.$$phase) {
              $scope.$apply();
          }
      }
  }, true);

Thanks in advance.

Sorry, i'm late.

I got this working by adding a modified footer template to the script:

    var ft= "<div ng-show=\"showFooter\" class=\"ngFooterPanel\" ng-class=\"{'ui-widget-content': jqueryUITheme, 

    ....

    "            <button class=\"ngPagerButton\" ng-click=\"pageForward()\" ng-disabled=\"cantPageForward()|| result.length < pagingOptions.pageSize\" title=\"{{i18n.ngPagerNextTitle}}\"><div class=\"ngPagerLastTriangle ngPagerNextTriangle\"></div></button>" +
    "            <button class=\"ngPagerButton\" ng-click=\"pageToLast()\" ng-disabled=\"cantPageToLast()|| result.length < pagingOptions.pageSize\" title=\"{{i18n.ngPagerLastTitle}}\"><div class=\"ngPagerLastTriangle\"><div class=\"ngPagerLastBar\"></div></div></button>" +

    ....

and assigning it to the grid with:

  $scope.settings = {
    ...
      footerTemplate:ft
  };

I'm about to leave for the weekend so i can't test this throughly, but i hope it helps anyhow.

Here's a Plunker to play around with it.

I fixed it by making a very small change in the filterOptions watch. Which looks like,

Demo http://plnkr.co/edit/ULLg6AuTBprMXEcR7eXC?p=preview

JS

$scope.$watch('filterOptions', function (new_value, old_value) {
      if(new_value){
          $scope.result = $filter('filter')($scope.all_data, $scope.filterOptions.filterText);
          $scope.totalServerItems = $scope.result.length; //This helped out to fix the issue
          if (!$scope.$$phase) {
              $scope.$apply();
          }
      }
  }, true);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM