Skip to content

Commit 5088057

Browse files
chatcherchatcher
committed
feat(pagination): Add custom pagination with variable page sizes
Use Case: Client requests page breaks by Date column. This can currently be accomplished by external pagination, but the 'page size' dropdown becomes irrelevant, and the page-count on the right can no longer correctly determine the correct row range. The pagination template has been modified to hide the page-size dropdown then custom pagination is enabled, and to use new API methods for the row range.
1 parent ff54930 commit 5088057

File tree

4 files changed

+175
-14
lines changed

4 files changed

+175
-14
lines changed

‎misc/tutorial/406_custom_pagination.ngdoc

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
@ngdoc overview
2+
@name Tutorial: 406 Custom Pagination
3+
@description
4+
5+
When pagination is enabled, the data is displayed in pages that can be browsed using the built in
6+
pagination selector. However, you don't always have pages with the same number of rows.
7+
8+
For custom pagination, set the `pageSizes` option and the `useCustomPagination`.
9+
~~ and implement the `gridApi.pagination.on.paginationChanged` callback function. The callback
10+
may contain code to update any pagination state variables your application may utilize, e.g. variables containing
11+
the `pageNumber`, `pageSize`, and `pageSizeList`. The REST call used to fetch the data from the server should be
12+
called from within this callback. The URL of the call should contain query parameters that will allow the server-side
13+
code to have sufficient information to be able to retrieve the specific subset of data that the client requires from
14+
the entire set.~~
15+
16+
It should also update the `$scope.gridOptions.totalItems` variable with the total count of rows that exist (but
17+
were not all fetched in the REST call mentioned above since they exist in other pages of data).
18+
19+
This will allow ui-grid to calculate the correct number of pages on the client-side.
20+
21+
@example
22+
This shows custom pagination.
23+
<example module="app">
24+
<file name="app.js">
25+
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
26+
27+
app.controller('MainCtrl', [
28+
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
29+
30+
$scope.gridOptions1 = {
31+
paginationPageSizes: null,
32+
useCustomPagination: true,
33+
columnDefs: [
34+
{ name: 'name', enableSorting: false },
35+
{ name: 'gender', enableSorting: false },
36+
{ name: 'company', enableSorting: false }
37+
]
38+
};
39+
40+
$scope.gridOptions2 = {
41+
paginationPageSizes: null,
42+
useCustomPagination: true,
43+
useExternalPagination : true,
44+
columnDefs: [
45+
{ name: 'name', enableSorting: false },
46+
{ name: 'gender', enableSorting: false },
47+
{ name: 'company', enableSorting: false }
48+
],
49+
onRegisterApi: function(gridApi) {
50+
gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) {
51+
$scope.gridOptions2.data = getPage($scope.grid2data, pageNumber);
52+
});
53+
}
54+
};
55+
56+
$http.get('/data/100_ASC.json')
57+
.success(function (data) {
58+
$scope.gridOptions1.data = data;
59+
$scope.gridOptions1.paginationPageSizes = calculatePageSizes(data);
60+
});
61+
62+
$http.get('/data/100.json')
63+
.success(function (data) {
64+
$scope.grid2data = data;
65+
$scope.gridOptions2.totalItems = 0;//data.length;
66+
$scope.gridOptions2.paginationPageSizes = calculatePageSizes(data);
67+
$scope.gridOptions2.data = getPage($scope.grid2data, 1);
68+
});
69+
70+
71+
function calculatePageSizes(data) {
72+
var initials = [];
73+
return data.reduce(function(pageSizes, row) {
74+
var initial = row.name.charAt(0);
75+
var index = initials.indexOf(initial);
76+
if(index < 0)
77+
{
78+
index = initials.length;
79+
initials.push(initial);
80+
}
81+
pageSizes[index] = (pageSizes[index] || 0) + 1;
82+
return pageSizes;
83+
}, []);
84+
}
85+
86+
function getPage(data, pageNumber)
87+
{
88+
var initials = [];
89+
return data.reduce(function(pages, row) {
90+
var initial = row.name.charAt(0);
91+
92+
if(!pages[initial]) pages[initial] = [];
93+
pages[initial].push(row);
94+
95+
if(initials.indexOf(initial) < 0)
96+
{
97+
initials.push(initial);
98+
initials.sort();
99+
}
100+
101+
return pages;
102+
103+
}, {})[initials[pageNumber - 1]] || [];
104+
}
105+
106+
}
107+
]);
108+
</file>
109+
<file name="index.html">
110+
<div ng-controller="MainCtrl">
111+
<div ui-grid="gridOptions1" ui-grid-pagination class="grid"></div>
112+
<div ui-grid="gridOptions2" ui-grid-pagination class="grid"></div>
113+
</div>
114+
</file>
115+
<file name="main.css">
116+
.grid {
117+
width: 600px;
118+
}
119+
</file>
120+
</example>

‎src/features/pagination/js/pagination.js

+50-11
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,34 @@
6565
getPage: function () {
6666
return grid.options.enablePagination ? grid.options.paginationCurrentPage : null;
6767
},
68+
/**
69+
* @ngdoc method
70+
* @name getFirstRowIndex
71+
* @methodOf ui.grid.pagination.api:PublicAPI
72+
* @description Returns the index of the first row of the current page.
73+
*/
74+
getFirstRowIndex: function () {
75+
if (grid.options.useCustomPagination) {
76+
return grid.options.paginationPageSizes.reduce(function(result, size, index) {
77+
return index < grid.options.paginationCurrentPage - 1 ? result + size : result;
78+
}, 0);
79+
}
80+
return ((grid.options.paginationCurrentPage - 1) * grid.options.paginationPageSize) + 1;
81+
},
82+
/**
83+
* @ngdoc method
84+
* @name getLastRowIndex
85+
* @methodOf ui.grid.pagination.api:PublicAPI
86+
* @description Returns the index of the last row of the current page.
87+
*/
88+
getLastRowIndex: function () {
89+
if (grid.options.useCustomPagination) {
90+
return grid.options.paginationPageSizes.reduce(function(result, size, index) {
91+
return index <= grid.options.paginationCurrentPage - 1 ? result + size : result;
92+
}, 0);
93+
}
94+
return Math.min(grid.options.paginationCurrentPage * grid.options.paginationPageSize, grid.options.totalItems);
95+
},
6896
/**
6997
* @ngdoc method
7098
* @name getTotalPages
@@ -76,6 +104,10 @@
76104
return null;
77105
}
78106

107+
if (grid.options.useCustomPagination) {
108+
return grid.options.paginationPageSizes.length;
109+
}
110+
79111
return (grid.options.totalItems === 0) ? 1 : Math.ceil(grid.options.totalItems / grid.options.paginationPageSize);
80112
},
81113
/**
@@ -146,12 +178,14 @@
146178
var visibleRows = renderableRows.filter(function (row) { return row.visible; });
147179
grid.options.totalItems = visibleRows.length;
148180

149-
var firstRow = (currentPage - 1) * pageSize;
181+
var firstRow = publicApi.methods.pagination.getFirstRowIndex();
182+
var lastRow = publicApi.methods.pagination.getLastRowIndex();
183+
150184
if (firstRow > visibleRows.length) {
151185
currentPage = grid.options.paginationCurrentPage = 1;
152186
firstRow = (currentPage - 1) * pageSize;
153187
}
154-
return visibleRows.slice(firstRow, firstRow + pageSize);
188+
return visibleRows.slice(firstRow, lastRow);
155189
};
156190

157191
grid.registerRowsProcessor(processPagination, 900 );
@@ -189,6 +223,16 @@
189223
* and totalItems. Defaults to `false`
190224
*/
191225
gridOptions.useExternalPagination = gridOptions.useExternalPagination === true;
226+
227+
/**
228+
* @ngdoc property
229+
* @name useCustomPagination
230+
* @propertyOf ui.grid.pagination.api:GridOptions
231+
* @description Disables client-side pagination. When true, handle the `paginationChanged` event and set `data`,
232+
* `firstRowIndex`, `lastRowIndex`, and `totalItems`. Defaults to `false`.
233+
*/
234+
gridOptions.useCustomPagination = gridOptions.useCustomPagination === true;
235+
192236
/**
193237
* @ngdoc property
194238
* @name totalItems
@@ -368,8 +412,6 @@
368412
$scope.$on('$destroy', dataChangeDereg);
369413

370414
var setShowing = function () {
371-
$scope.showingLow = ((options.paginationCurrentPage - 1) * options.paginationPageSize) + 1;
372-
$scope.showingHigh = Math.min(options.paginationCurrentPage * options.paginationPageSize, options.totalItems);
373415
};
374416

375417
var deregT = $scope.$watch('grid.options.totalItems + grid.options.paginationPageSize', setShowing);
@@ -400,19 +442,16 @@
400442
});
401443

402444
$scope.cantPageForward = function () {
403-
if (options.totalItems > 0) {
404-
return options.paginationCurrentPage >= $scope.paginationApi.getTotalPages();
445+
if ($scope.paginationApi.getTotalPages()) {
446+
return $scope.cantPageToLast();
405447
} else {
406448
return options.data.length < 1;
407449
}
408450
};
409451

410452
$scope.cantPageToLast = function () {
411-
if (options.totalItems > 0) {
412-
return $scope.cantPageForward();
413-
} else {
414-
return true;
415-
}
453+
var totalPages = $scope.paginationApi.getTotalPages();
454+
return !totalPages || options.paginationCurrentPage >= totalPages;
416455
};
417456

418457
$scope.cantPageBackward = function () {

‎src/features/pagination/templates/pagination.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
</div>
7979
<div
8080
class="ui-grid-pager-row-count-picker"
81-
ng-if="grid.options.paginationPageSizes.length > 1">
81+
ng-if="grid.options.paginationPageSizes.length > 1 && !grid.options.useCustomPagination">
8282
<select
8383
ui-grid-one-bind-aria-labelledby-grid="'items-per-page-label'"
8484
ng-model="grid.options.paginationPageSize"
@@ -101,12 +101,12 @@
101101
class="ui-grid-pager-count">
102102
<span
103103
ng-show="grid.options.totalItems > 0">
104-
{{showingLow}}
104+
{{ 1 + paginationApi.getFirstRowIndex() }}
105105
<abbr
106106
ui-grid-one-bind-title="paginationThrough">
107107
-
108108
</abbr>
109-
{{showingHigh}} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}
109+
{{ paginationApi.getLastRowIndex() }} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}
110110
</span>
111111
</div>
112112
</div>

‎src/features/pagination/test/pagination.spec.js

+2
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@ describe('ui.grid.pagination uiGridPaginationService', function () {
6464
describe('initialisation', function () {
6565
it('registers the API and methods', function () {
6666
expect(gridApi.pagination.getPage).toEqual(jasmine.any(Function));
67+
expect(gridApi.pagination.getFirstRowIndex).toEqual(jasmine.any(Function));
68+
expect(gridApi.pagination.getLastRowIndex).toEqual(jasmine.any(Function));
6769
expect(gridApi.pagination.getTotalPages).toEqual(jasmine.any(Function));
6870
expect(gridApi.pagination.nextPage).toEqual(jasmine.any(Function));
6971
expect(gridApi.pagination.previousPage).toEqual(jasmine.any(Function));

0 commit comments

Comments
 (0)