Skip to content

Commit

Permalink
Fix pagination buttons markup
Browse files Browse the repository at this point in the history 
* Limit buttons in case of large content range (closes #296)
* Add link to first and last page
* Use default Bootstrap markup for pagination
  • Loading branch information
@fzaninotto
fzaninotto committed Mar 1, 2015
1 parent 33f2d9d commit 4e17b6e
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 24 deletions.
26 changes: 16 additions & 10 deletions src/javascripts/ng-admin/Crud/list/DatagridPagination.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
<div ng-if="!paginationCtrl.infinite">
<div class="grid-detail">
<span class="total" ng-if="paginationCtrl.totalItems > 0">
<nav class="pagination-bar">

<div class="total" ng-if="paginationCtrl.totalItems > 0">
<strong>{{ paginationCtrl.offsetBegin }}</strong> - <strong>{{ paginationCtrl.offsetEnd }}</strong> on <strong>{{ paginationCtrl.totalItems }}</strong>
</span>
<span class="total no-record" ng-if="paginationCtrl.totalItems == 0">
</div>

<div class="total no-record" ng-if="paginationCtrl.totalItems == 0">
<strong>No record found.</strong>
</span>
<div class="btn-group btn-group-sm" role="group" aria-label="pagination" ng-if="paginationCtrl.displayPagination">
<a href class="btn btn-default" ng-if="paginationCtrl.page != 1" ng-click="paginationCtrl.setPage(paginationCtrl.page - 1)">« Prev</a>
<a href class="btn btn-default" ng-if="paginationCtrl.nbPages > 1" ng-repeat="n in paginationCtrl.range(1, paginationCtrl.nbPages)" ng-class="{'active': n == paginationCtrl.page}" ng-click="paginationCtrl.setPage(n)">{{ n }}</a>
<a href class="btn btn-default" ng-if="paginationCtrl.page != paginationCtrl.nbPages" ng-click="paginationCtrl.setPage(paginationCtrl.page + 1)">Next »</a>
</div>
</div>

<ul class="pagination pagination-sm pull-right" role="group" aria-label="pagination" ng-if="paginationCtrl.displayPagination">
<li><a href ng-if="paginationCtrl.page != 1" ng-click="paginationCtrl.setPage(paginationCtrl.page - 1)">« Prev</a></li>
<li ng-repeat="n in paginationCtrl.range(paginationCtrl.page) track by $index" ng-class="{'active': n == paginationCtrl.page}">
<a href ng-if="n != '.'" ng-click="paginationCtrl.setPage(n)">{{ n }}</a>
<span ng-if="n == '.'">&hellip;</span>
</li>
<li><a href ng-if="paginationCtrl.page != paginationCtrl.nbPages" ng-click="paginationCtrl.setPage(paginationCtrl.page + 1)">Next »</a></li>
</ul>
</nav>
</div>
31 changes: 27 additions & 4 deletions src/javascripts/ng-admin/Crud/list/DatagridPaginationController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,35 @@ define(function () {
* @param {int} max
* @returns {Array}
*/
DatagridPaginationController.prototype.range = function (min, max) {
DatagridPaginationController.prototype.range = function (page) {
var input = [],
i;
nbPages = this.nbPages;

for (i = min; i <= max; i++) {
input.push(i);
// display page links around the current page
if (page > 3) {
input.push('1');
}
if (page > 4) {
input.push('.');
}
if (page > 2) {
input.push(page - 2);
}
if (page > 1) {
input.push(page - 1);
}
input.push(page);
if (page < nbPages) {
input.push(page + 1);
}
if (page < (nbPages - 1)) {
input.push(page + 2);
}
if (page < (nbPages - 3)) {
input.push('.');
}
if (page < (nbPages - 2)) {
input.push(nbPages);
}

return input;
Expand Down
86 changes: 79 additions & 7 deletions src/javascripts/test/unit/Crud/list/maDatagridPaginationSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ define(function (require) {
var element = $compile(directiveUsage)(scope)[0];
scope.$digest();

var totalElement = element.querySelector('.grid-detail .total');
var totalElement = element.querySelector('.pagination-bar .total');
expect(totalElement.innerText.trim()).toBe('No record found.');
});

it('should display item range displayed', function() {
it('should display the current data range', function() {
scope.totalItems = 37;
scope.itemsPerPage = 10;

Expand All @@ -46,26 +46,97 @@ define(function (require) {
var element = $compile(directiveUsage)(scope)[0];
scope.$digest();

var totalElement = element.querySelector('.grid-detail .total');
var totalElement = element.querySelector('.pagination-bar .total');
expect(totalElement.innerText.trim()).toBe(expectedText);
}

checkTotalText(-1, '1 - 10 on 37'); // Lower pages should be considered as page 1
checkTotalText( 0, '1 - 10 on 37');
checkTotalText( 1, '1 - 10 on 37');
checkTotalText( 2, '11 - 20 on 37');
checkTotalText( 3, '21 - 30 on 37');
checkTotalText( 4, '31 - 37 on 37');
checkTotalText( 8, '31 - 37 on 37'); // Higher pages should be considered as last page
});
});

it("should not display pagination links if all items can be displayed on current page", function () {
it('should display prev link except on the first one', function() {
scope.totalItems = 37;
scope.itemsPerPage = 10;
function checkPrevLink(page, expected) {
scope.page = page;
var element = $compile(directiveUsage)(scope)[0];
scope.$digest();
var firstButton = element.querySelector('.pagination-bar .pagination li');
expect(firstButton.innerText.trim()).toBe(expected);
}
checkPrevLink(1, '');
checkPrevLink(2, '« Prev');
checkPrevLink(3, '« Prev');
checkPrevLink(4, '« Prev');
});

it('should display next link except on the last one', function() {
scope.totalItems = 37;
scope.itemsPerPage = 10;
function checkPrevLink(page, expected) {
scope.page = page;
var element = $compile(directiveUsage)(scope)[0];
scope.$digest();
var lastButton = element.querySelectorAll('.pagination-bar .pagination li')[5];
expect(lastButton.innerText.trim()).toBe(expected);
}
checkPrevLink(1, 'Next »');
checkPrevLink(2, 'Next »');
checkPrevLink(3, 'Next »');
checkPrevLink(4, '');
});

it("should display all links if number of pages is below page range", function() {
it('should not display pagination links if all items can be displayed on current page', function() {
scope.totalItems = 10;
scope.itemsPerPage = 11;
scope.page = 1;
var element = $compile(directiveUsage)(scope)[0];
scope.$digest();
var buttons = element.querySelectorAll('.pagination-bar .pagination li');
expect(buttons.length).toBe(0);
});

it('should display all links if number of pages is below 5', function() {
scope.totalItems = 37;
scope.itemsPerPage = 10;
scope.page = 1;
function checkPrevLink(rank, expected) {
var element = $compile(directiveUsage)(scope)[0];
scope.$digest();
var lastButton = element.querySelectorAll('.pagination-bar .pagination li')[rank];
expect(lastButton.innerText.trim()).toBe(expected);
}
checkPrevLink(1, '1');
checkPrevLink(2, '2');
checkPrevLink(3, '3');
checkPrevLink(4, '4');
});

it("should display truncated centered page range if too many pages compared to given page range", function() {
it('should display truncated centered page range if number of pages is above 5', function() {
scope.totalItems = 77;
scope.itemsPerPage = 10;
function checkPageLinks(page, expected) {
scope.page = page;
var element = $compile(directiveUsage)(scope)[0];
scope.$digest();
var buttons = Array.prototype.slice.call(element.querySelectorAll('.pagination-bar .pagination li'));
var buttonsText = buttons.map(function(button) { return button.innerText.trim(); });
expect(buttonsText).toEqual(expected);
}
checkPageLinks(1, ['', '1', '2', '3', '…', '8', 'Next »']);
checkPageLinks(2, ['« Prev', '1', '2', '3', '4', '…', '8', 'Next »']);
checkPageLinks(3, ['« Prev', '1', '2', '3', '4', '5', '…', '8', 'Next »']);
checkPageLinks(4, ['« Prev', '1', '2', '3', '4', '5', '6', '…', '8', 'Next »']);
checkPageLinks(5, ['« Prev', '1', '…', '3', '4', '5', '6', '7', '8', 'Next »']);
checkPageLinks(6, ['« Prev', '1', '…', '4', '5', '6', '7', '8', 'Next »']);
checkPageLinks(7, ['« Prev', '1', '…', '5', '6', '7', '8', 'Next »']);
checkPageLinks(8, ['« Prev', '1', '…', '6', '7', '8', '']);
});
});

Expand All @@ -76,7 +147,8 @@ define(function (require) {

it('should not be displayed if pagination is infinite', function() {
var element = $compile(directiveUsage)(scope)[0];
expect(element.children().length).toBe(0);
scope.$digest();
expect(element.children.length).toBe(0);
});
});
});
Expand Down
10 changes: 7 additions & 3 deletions src/sass/ng-admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,11 +148,15 @@ div.bottom-loader {
}
}

.grid-detail {
.pagination-bar {
text-align: right;
margin-bottom: 20px;
margin: 20px 0;
.pagination {
margin: 0 0 0 20px;
}
.total {
padding-right: 10px;
display: inline-block;
padding: 5px;
}
}

Expand Down

0 comments on commit 4e17b6e

Please sign in to comment.