As I see the example on the ng-grid documentation it is merely intended to simulate a server call. The grid does work with serverside paging but it is up to the server to respond appropriately which I assume you have handled. You have not included your setPagingData method but if it is similar to the docs you have probably gotten a mix of serverside and clientside paging.
We have a getData method like this (omitting error handling):
function getData() {
$resource(urlService.getBaseUrl() + $scope.restUrl + ':id').query({
page: $scope.pagingOptions.currentPage,
pageSize: $scope.pagingOptions.pageSize
}, function (responseItems, getResponseHeaders) {
var xPageObject = getResponseHeaders('x-pagination');
xPageObject = angular.fromJson(xPageObject);
if (xPageObject) {
$scope.totalPages = xPageObject.TotalPages;
$scope.totalItems = xPageObject.TotalCount;
} else {
console.log("No paging header found");
}
$scope.items = responseItems;
});
}
our server method then pages appropriately. To ensure we update when paging options changes add a watch on the pagingoptions:
// Listen on changes to currentPage and reload when updated
$scope.$watch('pagingOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
if (newVal.pageSize !== oldVal.pageSize) {
newVal.currentPage = 1;
}
getData();
}
}, true);
This will ensure that whatever change is made to paging it will result in a new request.
With regards to your totalServerItems question it is defined in the options which scope variable the grid will use:
$scope.options = {
columnDefs: 'columnDefinitions',
data: 'items',
totalServerItems: 'totalItems'
};
In my case the $scope.totalItems contains the total number of items and it gets populate in the success callback from the response header.
HTH