How to do client side pagination using ngGrid?

Question

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

What about the client side? I could not find any hint of this in the documentation, but I cannot imagine that ng-grid also does not support paging on the client side.

Any clues?

Answer 1

I think the example given on the angular page ( http://angular-ui.imtqy.com/ng-grid/ ) actually shows an example of client paging. If you look at the data loading invoked by the sample script ( http://angular-ui.imtqy.com/ng-grid/jsonFiles/largeLoad.json ), you will see that this is actually not doing any server paging ... it comes out as one big file.

Answer 2

It can help you!

AngularJs Code Example

 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" } ]; }); 

HTML code

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