如何使用ngGrid进行客户端分页？

If you set the enablePaging options of an ng-grid to true, you enable server-side pagination.

如果将ng-grid的enablePaging选项设置为true,则启用服务器端分页。

What about client-side one? I could not find any hint on this in the documentation, but I can not imagine that ng-grid does not support client-side paging as well.

那客户端呢?我在文档中找不到任何暗示,但我无法想象ng-grid也不支持客户端分页。

Any hint?

2 个解决方案

#1

I think the example given on the angular page (http://angular-ui.github.io/ng-grid/) actually shows an example of client-side paging. If you look at the data load that is being called by the sample script (http://angular-ui.github.io/ng-grid/jsonFiles/largeLoad.json), you'll see that its not actually doing any server-side paging... it's coming down as one big file.

我认为角度页面(http://angular-ui.github.io/ng-grid/)上给出的示例实际上显示了客户端分页的示例。如果你看一下示例脚本调用的数据加载(http://angular-ui.github.io/ng-grid/jsonFiles/largeLoad.json),你会发现它实际上没有做任何服务器旁边的分页...它作为一个大文件而下降。

#2

It might help you!!

它可能会帮助你!!

The AngularJs code-sample

AngularJs代码示例

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
  $scope.filterOptions = {
    filterText: ""
  };

  $scope.pagingOptions = {
    pageSizes: [25, 50, 100],
    pageSize: 25,
    totalServerItems: 0,
    currentPage: 1
  };

  $scope.setPagingData = function(data, page, pageSize) {
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.myData = pagedData;
    $scope.pagingOptions.totalServerItems = data.length;
    if (!$scope.$$phase) {
      $scope.$apply();
    }
  };

  $scope.getPagedDataAsync = function(pageSize, page) {
    setTimeout(function() {      
        $http.get('json').success(function(largeLoad) {
          $scope.setPagingData(largeLoad, page, pageSize);
        });
    }, 100);
  };

  $scope.$watch('pagingOptions', function() {
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
  }, true);

  $scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    pagingOptions: $scope.pagingOptions,
    showFooter: true
  };

  $scope.gridOptions.columnDefs = 'gridColumnDefs';

  // city loc pop state
  $scope.gridColumnDefs = [{
      field: "city"
    },
    {
      field: "state"
    }, {
      field: "pop"
    }, {
      field: "loc"
    }
  ];

});

The HTML code-sample

HTML代码示例

   <div ng-app="myApp" ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </div>

#1

#2