This repository was archived by the owner on Feb 26, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 478
A better range() function to limit the number of items #164
Copy link
Copy link
Open
Description
I realize when having a lot of pages, the pagination repeater became too long and sometimes wrap in the container.
The following code allows you to have ellipses (...) in between (similar to 500px's pagination, see http://500px.com/photos)
Markup:
<li ng-repeat="n in range(pagedItems.length)" ng-class="{active: n == currentPage}">
<a ng-bind="n + 1" ng-show="n >= 0" ng-click="setPage(n)">1</a>
<span ng-show="n < 0">...</span>
</li>
Range function (might have to tweak the numbers):
$scope.range = function(start, end) {
var ret = [],
i;
if (!end) {
end = start;
start = 0;
}
for (i = start; i < end; i++) {
ret.push(i);
}
var paging = ret;
if (ret.length > 6) {
var currentPage = $scope.currentPage;
paging = ret.slice(0, 1);
if (currentPage === 0) {
//shows 1, 2, 3 ... 8, 9, 10
paging = paging.concat(ret.slice(1, 3));
paging.push(-1);
paging = paging.concat(ret.slice(ret.length - 3, ret.length));
} else if (currentPage < 4) {
//shows 1, 2, 3, 4, 5 ... 10
paging = paging.concat(ret.slice(1, 5));
paging.push(-1);
paging = paging.concat(ret.slice(ret.length - 1, ret.length));
} else if (currentPage >= ret.length - 4) {
//shows 1 ... 6, 7, 8, 9, 10
paging.push(-1);
paging = paging.concat(ret.slice(ret.length - 5, ret.length));
} else {
//shows 1 ... 4, 5, 6 ... 10 for example
paging.push(-1);
paging = paging.concat(ret.slice(currentPage - 1, currentPage + 2));
paging.push(-1);
paging = paging.concat(ret.slice(ret.length - 1, ret.length));
}
}
return paging;
};
Metadata
Metadata
Assignees
Labels
No labels