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 first/last link & constant congif options
Browse files Browse the repository at this point in the history
Closes #120
  • Loading branch information
bekos authored and pkozlowski-opensource committed Mar 2, 2013
1 parent 29930ef commit 0ff0454
Show file tree
Hide file tree
Showing 5 changed files with 358 additions and 29 deletions.
5 changes: 3 additions & 2 deletions src/pagination/docs/demo.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<div ng-controller="PaginationDemoCtrl">
<pagination num-pages="noOfPages" current-page="currentPage"></pagination>
<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small"></pagination>
<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-mini"></pagination>
<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></pagination>
<pagination boundary-links="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
<pagination direction-links="false" num-pages="noOfPages" current-page="currentPage"></pagination>
<button class="btn" ng-click="setPage(3)">Set current page to: 3</button>
The selected page no: {{currentPage}}
</div>
2 changes: 1 addition & 1 deletion src/pagination/docs/readme.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
A lightweight pagination directive that is focused on ... providing pagination!

It will take care of visualising a pagination bar. Additionally it will make sure that the state (enabled / disabled) of the Previous / Next buttons is maintained correctly.
It will take care of visualising a pagination bar. Additionally it will make sure that the state (enabled / disabled) of the Previous / Next and First / Last buttons (if exist) is maintained correctly.

It also provides optional attribute max-size to limit the size of pagination bar.
77 changes: 57 additions & 20 deletions src/pagination/pagination.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,45 @@
angular.module('ui.bootstrap.pagination', [])

.directive('pagination', function() {
.constant('paginationConfig', {
boundaryLinks: false,
directionLinks: true,
firstText: 'First',
previousText: 'Previous',
nextText: 'Next',
lastText: 'Last'
})

.directive('pagination', ['paginationConfig', function(paginationConfig) {
return {
restrict: 'EA',
scope: {
numPages: '=',
currentPage: '=',
maxSize: '=',
onSelectPage: '&',
nextText: '@',
previousText: '@'
onSelectPage: '&'
},
templateUrl: 'template/pagination/pagination.html',
replace: true,
link: function(scope) {
link: function(scope, element, attrs) {

// Setup configuration parameters
var boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
var directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$eval(attrs.directionLinks) : paginationConfig.directionLinks;
var firstText = angular.isDefined(attrs.firstText) ? attrs.firstText : paginationConfig.firstText;
var previousText = angular.isDefined(attrs.previousText) ? attrs.previousText : paginationConfig.previousText;
var nextText = angular.isDefined(attrs.nextText) ? attrs.nextText : paginationConfig.nextText;
var lastText = angular.isDefined(attrs.lastText) ? attrs.lastText : paginationConfig.lastText;

// Create page object used in template
function makePage(number, text, isActive, isDisabled) {
return {
number: number,
text: text,
active: isActive,
disabled: isDisabled
};
}

scope.$watch('numPages + currentPage + maxSize', function() {
scope.pages = [];

Expand All @@ -29,9 +55,31 @@ angular.module('ui.bootstrap.pagination', [])
startPage = startPage - ((startPage + maxSize - 1) - scope.numPages );
}

for(var i=0; i < maxSize && i < scope.numPages ;i++) {
scope.pages.push(startPage + i);
// Add page number links
for (var number = startPage, max = startPage + maxSize; number < max; number++) {
var page = makePage(number, number, scope.isActive(number), false);
scope.pages.push(page);
}

// Add previous & next links
if (directionLinks) {
var previousPage = makePage(scope.currentPage - 1, previousText, false, scope.noPrevious());
scope.pages.unshift(previousPage);

var nextPage = makePage(scope.currentPage + 1, nextText, false, scope.noNext());
scope.pages.push(nextPage);
}

// Add first & last links
if (boundaryLinks) {
var firstPage = makePage(1, firstText, false, scope.noPrevious());
scope.pages.unshift(firstPage);

var lastPage = makePage(scope.numPages, lastText, false, scope.noNext());
scope.pages.push(lastPage);
}


if ( scope.currentPage > scope.numPages ) {
scope.selectPage(scope.numPages);
}
Expand All @@ -47,22 +95,11 @@ angular.module('ui.bootstrap.pagination', [])
};

scope.selectPage = function(page) {
if ( ! scope.isActive(page) ) {
if ( ! scope.isActive(page) && page > 0 && page <= scope.numPages) {
scope.currentPage = page;
scope.onSelectPage({ page: page });
}
};

scope.selectPrevious = function() {
if ( !scope.noPrevious() ) {
scope.selectPage(scope.currentPage-1);
}
};
scope.selectNext = function() {
if ( !scope.noNext() ) {
scope.selectPage(scope.currentPage+1);
}
};
}
};
});
}]);
Loading

0 comments on commit 0ff0454

Please sign in to comment.