Skip to content
This repository has been archived by the owner on Feb 26, 2024. It is now read-only.

A better range() function to limit the number of items #164

Open
SystemR opened this issue Jul 23, 2013 · 2 comments
Open

A better range() function to limit the number of items #164

SystemR opened this issue Jul 23, 2013 · 2 comments

Comments

@SystemR
Copy link

SystemR commented Jul 23, 2013

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;
};
@mrpatel15
Copy link

mrpatel15 commented Feb 10, 2017

ng-repeat="n in range(pagedItems.length) track by $index"

Note: Need to add track by index in ng-repeat

pagination - ngrepeat dupes error

@mrpatel15
Copy link

Great fix for custom pagination

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants