Default
-
-
-
-
+
+
+
+
The selected page no: {{currentPage}}
Pager
-
+
Limit the maximum visible buttons
-
-
+
+
Page: {{bigCurrentPage}} / {{numPages}}
diff --git a/src/pagination/pagination.js b/src/pagination/pagination.js
index e7fcfae273..ed7678d5e2 100644
--- a/src/pagination/pagination.js
+++ b/src/pagination/pagination.js
@@ -1,5 +1,5 @@
angular.module('ui.bootstrap.pagination', [])
-.controller('PaginationController', ['$scope', '$attrs', '$parse', function($scope, $attrs, $parse) {
+.controller('UibPaginationController', ['$scope', '$attrs', '$parse', function($scope, $attrs, $parse) {
var self = this,
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
@@ -73,7 +73,7 @@ angular.module('ui.bootstrap.pagination', [])
};
}])
-.constant('paginationConfig', {
+.constant('uibPaginationConfig', {
itemsPerPage: 10,
boundaryLinks: false,
directionLinks: true,
@@ -84,7 +84,7 @@ angular.module('ui.bootstrap.pagination', [])
rotate: true
})
-.directive('pagination', ['$parse', 'paginationConfig', function($parse, paginationConfig) {
+.directive('uibPagination', ['$parse', 'uibPaginationConfig', function($parse, paginationConfig) {
return {
restrict: 'EA',
scope: {
@@ -95,8 +95,8 @@ angular.module('ui.bootstrap.pagination', [])
lastText: '@',
ngDisabled:'='
},
- require: ['pagination', '?ngModel'],
- controller: 'PaginationController',
+ require: ['uibPagination', '?ngModel'],
+ controller: 'UibPaginationController',
controllerAs: 'pagination',
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/pagination/pagination.html';
@@ -194,14 +194,170 @@ angular.module('ui.bootstrap.pagination', [])
};
}])
-.constant('pagerConfig', {
+.constant('uibPagerConfig', {
itemsPerPage: 10,
previousText: '« Previous',
nextText: 'Next »',
align: true
})
-.directive('pager', ['pagerConfig', function(pagerConfig) {
+.directive('uibPager', ['uibPagerConfig', function(pagerConfig) {
+ return {
+ restrict: 'EA',
+ scope: {
+ totalItems: '=',
+ previousText: '@',
+ nextText: '@',
+ ngDisabled: '='
+ },
+ require: ['uibPager', '?ngModel'],
+ controller: 'UibPaginationController',
+ controllerAs: 'pagination',
+ templateUrl: function(element, attrs) {
+ return attrs.templateUrl || 'template/pagination/pager.html';
+ },
+ replace: true,
+ link: function(scope, element, attrs, ctrls) {
+ var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+
+ if (!ngModelCtrl) {
+ return; // do nothing if no ng-model
+ }
+
+ scope.align = angular.isDefined(attrs.align) ? scope.$parent.$eval(attrs.align) : pagerConfig.align;
+ paginationCtrl.init(ngModelCtrl, pagerConfig);
+ }
+ };
+}]);
+
+/* Deprecated Pagination Below */
+
+angular.module('ui.bootstrap.pagination')
+.value('$paginationSuppressWarning', false)
+.controller('PaginationController', ['$scope', '$attrs', '$parse', '$controller', '$element', '$log', '$paginationSuppressWarning', function($scope, $attrs, $parse, $controller, $element, $log, $paginationSuppressWarning) {
+ if (!$paginationSuppressWarning) {
+ $log.warn('PaginationController is now deprecated. Use UibPaginationController instead.');
+ }
+ return $controller('UibPaginationController', {
+ $scope: $scope,
+ $element: $element,
+ $attrs: $attrs
+ });
+}])
+.directive('pagination', ['$parse', 'uibPaginationConfig', '$log', '$paginationSuppressWarning', function($parse, paginationConfig, $log, $paginationSuppressWarning) {
+ return {
+ restrict: 'EA',
+ scope: {
+ totalItems: '=',
+ firstText: '@',
+ previousText: '@',
+ nextText: '@',
+ lastText: '@',
+ ngDisabled:'='
+ },
+ require: ['pagination', '?ngModel'],
+ controller: 'PaginationController',
+ controllerAs: 'pagination',
+ templateUrl: function(element, attrs) {
+ return attrs.templateUrl || 'template/pagination/pagination.html';
+ },
+ replace: true,
+ link: function(scope, element, attrs, ctrls) {
+ if (!$paginationSuppressWarning) {
+ $log.warn('pagination is now deprecated. Use uib-pagination instead.');
+ }
+ var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+
+ if (!ngModelCtrl) {
+ return; // do nothing if no ng-model
+ }
+
+ // 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;
+ 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;
+
+ paginationCtrl.init(ngModelCtrl, paginationConfig);
+
+ if (attrs.maxSize) {
+ scope.$parent.$watch($parse(attrs.maxSize), function(value) {
+ maxSize = parseInt(value, 10);
+ paginationCtrl.render();
+ });
+ }
+
+ // Create page object used in template
+ function makePage(number, text, isActive) {
+ return {
+ number: number,
+ text: text,
+ active: isActive
+ };
+ }
+
+ function getPages(currentPage, totalPages) {
+ var pages = [];
+
+ // Default page limits
+ var startPage = 1, endPage = totalPages;
+ var isMaxSized = angular.isDefined(maxSize) && maxSize < totalPages;
+
+ // recompute if maxSize
+ if (isMaxSized) {
+ if (rotate) {
+ // Current page is displayed in the middle of the visible ones
+ startPage = Math.max(currentPage - Math.floor(maxSize/2), 1);
+ endPage = startPage + maxSize - 1;
+
+ // Adjust if limit is exceeded
+ if (endPage > totalPages) {
+ endPage = totalPages;
+ startPage = endPage - maxSize + 1;
+ }
+ } else {
+ // Visible pages are paginated with maxSize
+ startPage = ((Math.ceil(currentPage / maxSize) - 1) * maxSize) + 1;
+
+ // Adjust last page if limit is exceeded
+ endPage = Math.min(startPage + maxSize - 1, totalPages);
+ }
+ }
+
+ // Add page number links
+ for (var number = startPage; number <= endPage; number++) {
+ var page = makePage(number, number, number === currentPage);
+ pages.push(page);
+ }
+
+ // Add links to move between page sets
+ if (isMaxSized && ! rotate) {
+ if (startPage > 1) {
+ var previousPageSet = makePage(startPage - 1, '...', false);
+ pages.unshift(previousPageSet);
+ }
+
+ if (endPage < totalPages) {
+ var nextPageSet = makePage(endPage + 1, '...', false);
+ pages.push(nextPageSet);
+ }
+ }
+
+ return pages;
+ }
+
+ var originalRender = paginationCtrl.render;
+ paginationCtrl.render = function() {
+ originalRender();
+ if (scope.page > 0 && scope.page <= scope.totalPages) {
+ scope.pages = getPages(scope.page, scope.totalPages);
+ }
+ };
+ }
+ };
+}])
+
+.directive('pager', ['uibPagerConfig', '$log', '$paginationSuppressWarning', function(pagerConfig, $log, $paginationSuppressWarning) {
return {
restrict: 'EA',
scope: {
@@ -218,6 +374,9 @@ angular.module('ui.bootstrap.pagination', [])
},
replace: true,
link: function(scope, element, attrs, ctrls) {
+ if (!$paginationSuppressWarning) {
+ $log.warn('pager is now deprecated. Use uib-pager instead.');
+ }
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
if (!ngModelCtrl) {
diff --git a/src/pagination/test/pager.spec.js b/src/pagination/test/pager.spec.js
index 7527e83a76..3756d7062a 100644
--- a/src/pagination/test/pager.spec.js
+++ b/src/pagination/test/pager.spec.js
@@ -10,7 +10,7 @@ describe('pager directive', function() {
$document = _$document_;
$templateCache = _$templateCache_;
body = $document.find('body');
- element = $compile('