Ng-grid: Start and End Items for a Grid
With my recent experience using ng-grid, I came up with two dynamic variables that would display based on the location of where they were in relationship to a particular page. I wasn't sure how to find a specific example on this. Since most might wrap this up with pagination concept it's difficult to find something on this for Ng-grid.. Not that I need an example but I like to think of them as separate, or as metadata.
Dependency
I could have made the dependency on a ajax return call but I had multiple ways for the Grid data to be insert, so rather than set it at that point I just hooked in the dom. If you wanted to go the other route just change the self.domAccessProvider call to whatever you name your data object in the grid . As for the start number this is easier to handle, so there is no dependencies.
Solution
Notes
"All" is little of a hack that I used to allow for text values in Ng-grid to handle since the pagingOptions.pageSizes is more appropriately setup to handle integers. Insight I probably should make the "All" number a function but the scope of these two functions is already very small otherwise I would.
Resources
I have none, this was all me baby ;)
Dependency
I could have made the dependency on a ajax return call but I had multiple ways for the Grid data to be insert, so rather than set it at that point I just hooked in the dom. If you wanted to go the other route just change the self.domAccessProvider call to whatever you name your data object in the grid . As for the start number this is easier to handle, so there is no dependencies.
Solution
$scope.endItem = function () {
var self = this;
//Last page...
if (self.maxPages() == self.pagingOptions.currentPage) {
return self.totalServerItems;
}
var Item = ((self.pagingOptions.pageSize === "All") ? 150 : self.pagingOptions.pageSize);
if ((self.domAccessProvider.grid.data.length > Item) || (Item === 150))
return (self.domAccessProvider.grid.data.length);
else
return (Item * self.pagingOptions.currentPage);
};
$scope.startItem = function () {
var self = this;
var Item = ((self.pagingOptions.pageSize === "All") ? 150 : self.pagingOptions.pageSize);
var current = self.pagingOptions.currentPage;
return ((current - 1) * Item) + ((current === 1) ? 1 : 0);
};
If you look at Ng-grid's Footer template, all you need to do is call endItem and startItem in your controller.Notes
"All" is little of a hack that I used to allow for text values in Ng-grid to handle since the pagingOptions.pageSizes is more appropriately setup to handle integers. Insight I probably should make the "All" number a function but the scope of these two functions is already very small otherwise I would.
Resources
I have none, this was all me baby ;)