Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(pagination): add force-ellipses option and boundaryLinkNumbers
Browse files Browse the repository at this point in the history
- Adds force-ellipsis option for adding ellipses to pagination
- Add boundary-link-numbers option for allowance of the first and last page numbers to always be shown

Closes #2924
Closes #3064
Closes #3565
  • Loading branch information
OzzieOrca authored and wesleycho committed Nov 2, 2015
1 parent 3f307e4 commit 56642ea
Show file tree
Hide file tree
Showing 5 changed files with 223 additions and 26 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ lib-cov
*.swp
*.swo
.DS_Store
.idea

pids
logs
Expand Down
19 changes: 14 additions & 5 deletions src/pagination/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,22 @@ <h4>Default</h4>
<pre>The selected page no: {{currentPage}}</pre>
<button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

<hr />
<h4>Limit the maximum visible buttons</h4>
<h6><code>rotate</code> defaulted to <code>true</code>:</h6>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></uib-pagination>
<h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></uib-pagination>
<h6><code>rotate</code> set to <code>false</code>:</h6>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></uib-pagination>
<h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> defaulted to <code>true</code>:</h6>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></uib-pagination>
<h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> set to <code>false</code>:</h6>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>

<hr />
<h4>Pager</h4>
<uib-pager total-items="totalItems" ng-model="currentPage"></uib-pager>

<hr />
<h4>Limit the maximum visible buttons</h4>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></uib-pagination>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></uib-pagination>
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
</div>
8 changes: 8 additions & 0 deletions src/pagination/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ Settings can be provided as attributes in the `<uib-pagination>` or globally con
* `rotate`
_(Defaults: true)_ :
Whether to keep current page in the middle of the visible ones.

* `force-ellipses`
_(Defaults: false)_ :
Also displays ellipses when `rotate` is true and `max-size` is smaller than the number of pages.

* `direction-links`
_(Default: true)_ :
Expand All @@ -60,6 +64,10 @@ Settings can be provided as attributes in the `<uib-pagination>` or globally con
* `last-text`
_(Default: 'Last')_ :
Text for Last button.

* `boundary-link-numbers`
_(Default: false)_ :
Whether to always display the first and last page numbers. If `max-size` is smaller than the number of pages, then the first and last page numbers are still shown with ellipses in-between as necessary. NOTE: `max-size` refers to the center of the range. This option may add up to 2 more numbers on each side of the displayed range for the end value and what would be an ellipsis but is replaced by a number because it is sequential.

* `template-url`
_(Default: 'template/pagination/pagination.html')_ :
Expand Down
40 changes: 33 additions & 7 deletions src/pagination/pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ angular.module('ui.bootstrap.pagination', [])

$scope.$watch('totalItems', function(newTotal, oldTotal) {
if (angular.isDefined(newTotal) || newTotal !== oldTotal) {
$scope.totalPages = self.calculateTotalPages();
$scope.totalPages = self.calculateTotalPages();
updatePage();
}
});
Expand Down Expand Up @@ -80,12 +80,14 @@ angular.module('ui.bootstrap.pagination', [])
.constant('uibPaginationConfig', {
itemsPerPage: 10,
boundaryLinks: false,
boundaryLinkNumbers: false,
directionLinks: true,
firstText: 'First',
previousText: 'Previous',
nextText: 'Next',
lastText: 'Last',
rotate: true
rotate: true,
forceEllipses: false
})

.directive('uibPagination', ['$parse', 'uibPaginationConfig', function($parse, paginationConfig) {
Expand Down Expand Up @@ -115,7 +117,9 @@ angular.module('ui.bootstrap.pagination', [])

// Setup configuration parameters
var maxSize = angular.isDefined(attrs.maxSize) ? scope.$parent.$eval(attrs.maxSize) : paginationConfig.maxSize,
rotate = angular.isDefined(attrs.rotate) ? scope.$parent.$eval(attrs.rotate) : paginationConfig.rotate;
rotate = angular.isDefined(attrs.rotate) ? scope.$parent.$eval(attrs.rotate) : paginationConfig.rotate,
forceEllipses = angular.isDefined(attrs.forceEllipses) ? scope.$parent.$eval(attrs.forceEllipses) : paginationConfig.forceEllipses,
boundaryLinkNumbers = angular.isDefined(attrs.boundaryLinkNumbers) ? scope.$parent.$eval(attrs.boundaryLinkNumbers) : paginationConfig.boundaryLinkNumbers;
scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : paginationConfig.directionLinks;

Expand Down Expand Up @@ -148,7 +152,7 @@ angular.module('ui.bootstrap.pagination', [])
if (isMaxSized) {
if (rotate) {
// Current page is displayed in the middle of the visible ones
startPage = Math.max(currentPage - Math.floor(maxSize/2), 1);
startPage = Math.max(currentPage - Math.floor(maxSize / 2), 1);
endPage = startPage + maxSize - 1;

// Adjust if limit is exceeded
Expand All @@ -158,7 +162,7 @@ angular.module('ui.bootstrap.pagination', [])
}
} else {
// Visible pages are paginated with maxSize
startPage = ((Math.ceil(currentPage / maxSize) - 1) * maxSize) + 1;
startPage = (Math.ceil(currentPage / maxSize) - 1) * maxSize + 1;

// Adjust last page if limit is exceeded
endPage = Math.min(startPage + maxSize - 1, totalPages);
Expand All @@ -172,16 +176,38 @@ angular.module('ui.bootstrap.pagination', [])
}

// Add links to move between page sets
if ( isMaxSized && maxSize > 0 ) {
if ( startPage > 1 ) {
if (isMaxSized && maxSize > 0 && (!rotate || forceEllipses || boundaryLinkNumbers)) {
if (startPage > 1) {
if (!boundaryLinkNumbers || startPage > 3) { //need ellipsis for all options unless range is too close to beginning
var previousPageSet = makePage(startPage - 1, '...', false);
pages.unshift(previousPageSet);
}
if (boundaryLinkNumbers) {
if (startPage === 3) { //need to replace ellipsis when the buttons would be sequential
var secondPageLink = makePage(2, '2', false);
pages.unshift(secondPageLink);
}
//add the first page
var firstPageLink = makePage(1, '1', false);
pages.unshift(firstPageLink);
}
}

if (endPage < totalPages) {
if (!boundaryLinkNumbers || endPage < totalPages - 2) { //need ellipsis for all options unless range is too close to end
var nextPageSet = makePage(endPage + 1, '...', false);
pages.push(nextPageSet);
}
if (boundaryLinkNumbers) {
if (endPage === totalPages - 2) { //need to replace ellipsis when the buttons would be sequential
var secondToLastPageLink = makePage(totalPages - 1, totalPages - 1, false);
pages.push(secondToLastPageLink);
}
//add the last page
var lastPageLink = makePage(totalPages, totalPages, false);
pages.push(lastPageLink);
}
}
}
return pages;
}
Expand Down
Loading

0 comments on commit 56642ea

Please sign in to comment.