How to do client-side pagination with ngGrid? - angularjs

Question

If you set the enablePaging options of an ng-grid to true, you enable server-side pagination.
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.
Any hint?

Answer 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.

Answer 2

It might help you!!
The AngularJs code-sample
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
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>