Angular pagination reverse jumping

Question

I have this table:

Here is a code and Fiddle:

HTML

<table class="table table-striped table-condensed table-hover">
    <thead>
        <tr>
            <th class="id">Id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
            <th class="name">Name&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
            <th class="description">Description&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
            <th class="field3">Field 3&nbsp;<a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
            <th class="field4">Field 4&nbsp;<a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
            <th class="field5">Field 5&nbsp;<a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
        </tr>
    </thead>
    <tfoot>
        <td colspan="6">
            <div class="pagination pull-right">
                <ul>
                    <li ng-class="{disabled: currentPage == 0}">
                        <a href ng-click="prevPage()">« Prev</a>
                    </li>

                    <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
                        ng-class="{active: n == currentPage}"
                    ng-click="setPage()">
                        <a href ng-bind="n + 1">1</a>
                    </li>

                    <li ng-class="{disabled: (currentPage) == pagedItems.length - 1}">
                        <a href ng-click="nextPage()">Next »</a>
                    </li>
                </ul>
            </div>
        </td>
    </tfoot>
    <pre>pagedItems.length: {{pagedItems.length|json}}</pre>
    <pre>currentPage: {{currentPage|json}}</pre>
    <tbody>
        <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
            <td>{{item.field3}}</td>
            <td>{{item.field4}}</td>
            <td>{{item.field5}}</td>
        </tr>
    </tbody>
</table>

JS

function ctrlRead($scope, $filter) {
    // init
    $scope.sortingOrder = 'name';
    $scope.gap = 5;
    $scope.cached = 0;
    $scope.reverse = false;
    $scope.filteredItems = [];
    $scope.groupedItems = [];
    $scope.itemsPerPage = 5;
    $scope.pagedItems = [];
    $scope.currentPage = 0;
    $scope.items = [
        {"id":1,"name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"}, 
        {"id":2,"name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"}, 
//....
    ];

    var searchMatch = function (haystack, needle) {
        if (!needle) {
            return true;
        }
        return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
    };

    // init the filtered items
    $scope.search = function () {
        $scope.filteredItems = $filter('filter')($scope.items, function (item) {
            for(var attr in item) {
                if (searchMatch(item[attr], $scope.query))
                    return true;
            }
            return false;
        });
        // take care of the sorting order
        if ($scope.sortingOrder !== '') {
            $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
        }
        $scope.currentPage = 0;
        // now group by pages
        $scope.groupToPages();
    };

    // calculate page in place
    $scope.groupToPages = function () {
        $scope.pagedItems = [];

        for (var i = 0; i < $scope.filteredItems.length; i++) {
            if (i % $scope.itemsPerPage === 0) {
                $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
            } else {
                $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
            }
        }
    };

    $scope.range = function (size,start, end) {

        if( $scope.cached == start){
            start = start - 4;
            console.log('start',start);
        }

        $scope.cached = start;


        var ret = [];        
        console.log(size,start, end);

        if(size < 2){return ret;}

        if (size < end) {
            end = size;
            start = size-$scope.gap;
        }
        for (var i = start; i < end; i++) {
            if(i<0) continue;
            ret.push(i);
        }        
         console.log(ret);        
        return ret;
    };

    $scope.prevPage = function () {
        if ($scope.currentPage > 0) {
            $scope.currentPage--;
        }
    };

    $scope.nextPage = function () {
        if ($scope.currentPage < $scope.pagedItems.length - 1) {
            $scope.currentPage++;
        }
    };

    $scope.setPage = function () {
        $scope.currentPage = this.n;
    };

    // functions have been describe process the data for display
    $scope.search();

    // change sorting order
    $scope.sort_by = function(newSortingOrder) {
        if ($scope.sortingOrder == newSortingOrder)
            $scope.reverse = !$scope.reverse;

        $scope.sortingOrder = newSortingOrder;       
    };
};
ctrlRead.$inject = ['$scope', '$filter'];

From the code you can see that we have 13 groups of 5 rows.

If I press in pagination on 5, the 5 button jumps to 1st place and last place is 9.

By this way I can "travel" quickly over all data.

My problem that I don't know how to make it wok to jump back a.e reverse.

For example if I stay on 13:

and I press on 9 I expect that 9 will jump to the end of pagination and 1st element in list will be 5.

How to achieve that?

Thank you,

Answer 1

In general you need to decouple the idea of your current page index and the indices of your page navigation links. There are lots of ways to do this though. I did this by adding a left and right gap to the range you are creating, which better control the indices of the quick nav buttons. So when you call setPage I just add a little check:

if (this.n <= $scope.currentPage) {
    $scope.left_gap = $scope.gap-1;
    $scope.right_gap = 1;
} else {            
    $scope.left_gap = 0;
    $scope.right_gap = $scope.gap;
}

This way, when you click to the left of your current page, it will do the correct gaps so that the clicked index will be on the right, but the right clicking behavior still works. You just have to use:

<li ng-repeat="n in range(pagedItems.length, currentPage - left_gap, currentPage + right_gap) ">

This is not without it's bugs though, and you will still need to fix making sure you always keep 5 around, but I'll leave that to you. Here is the fiddle to play with.

Hope this helped!