dir-pagination directive angularjs : is there any way I can get all the records of current page in pagination?

Samir Shah picture Samir Shah · Apr 24, 2015 · Viewed 24.7k times · Source

I am using dir-pagination directive by @michaelbromley. I want to get all the records on the current page of directive. Is there any way to do this?

dir-paginate pic

Here is the link: dir-pagination, so I need a collection of 5 records from 100 to 96. Is there any quick way to do it?

I have tried couple of things but not working.

Answer

Eric F. picture Eric F. · Sep 25, 2015

I ran into this same issue, but the answers here didn't fulfill my needs (or maybe wants). I decided to solve it myself, and settled on creating a filter whose sole purpose is to record the items passing through it in a given property on a given target. I came up with this:

/**
 * Author: Eric Ferreira <http://stackoverflow.com/users/2954747/eric-ferreira> ©2015
 *
 * This filter will sit in the filter sequence, and its sole purpose is to record 
 * the current contents to the given property on the target object. It is sort of
 * like the 'tee' command in *nix cli.
 */
angular.module('app').filter('record', function() {
    return function(array, property, target) {
        if (target && property) {
            target[property] = array;
        }
        return array;
    }
});

Then you use the filter in your pagination (or anywhere you want to get the current array actually [think, after filtering with a search query, after paging, after filtering current page, et cetera]) like so:

<div dir-paginate="item in items | itemsPerPage:pageSize | record:'currentPage':this">{{item.text}}</div>

You can also use it multiple times in one sequence:

<div dir-paginate="item in items | filter:searchQuery | record:'filtered':this | itemsPerPage:pageSize | record:'currentPage':this">{{item.text}}</div>

The above would record both the current page and all records resulted from the current filter query.

This will record (and update whenever it changes) the current page in $scope.currentPage. The this in the above example is the target of the filter. It resolves to $scope.this which, for most intents and purposes, is just $scope.

In your specific case, you would use this line (after adding/requiring the filter in your module) instead for your pagination:

<li dir-paginate="meal in perman  = ( meals | filter:q ) | orderBy: order?'key':'-key' | itemsPerPage: pageSize | record:'currentPage':this">{{ meal.key + ': ' +meal.val }}</li>

I went ahead and forked your plunker to show it working too:

http://plnkr.co/edit/uC3RiC?p=preview