Permalink
Browse files

feat(pagination): add force-ellipses option and boundaryLinkNumbers

- 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
1 parent 3f307e4 commit 56642ea3969419f9fa1b2a5ab19b3dd8fe066b3c @OzzieOrca OzzieOrca committed with wesleycho Apr 19, 2015
Showing with 223 additions and 26 deletions.
  1. +1 −0 .gitignore
  2. +14 −5 src/pagination/docs/demo.html
  3. +8 −0 src/pagination/docs/readme.md
  4. +33 −7 src/pagination/pagination.js
  5. +167 −14 src/pagination/test/pagination.spec.js
View
@@ -9,6 +9,7 @@ lib-cov
*.swp
*.swo
.DS_Store
+.idea
pids
logs
@@ -8,12 +8,21 @@
<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>
@@ -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)_ :
@@ -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')_ :
@@ -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();
}
});
@@ -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) {
@@ -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;
@@ -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
@@ -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);
@@ -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;
}
Oops, something went wrong.

0 comments on commit 56642ea

Please sign in to comment.