builtwith.angularjs.org icon indicating copy to clipboard operation
builtwith.angularjs.org copied to clipboard

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

Open SystemR opened this issue 12 years ago • 2 comments

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;
};

SystemR avatar Jul 23 '13 08:07 SystemR

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 avatar Feb 10 '17 21:02 mrpatel15

Great fix for custom pagination

mrpatel15 avatar Feb 10 '17 21:02 mrpatel15