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

Question

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?

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 1

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

Answer 2

Here is another possible way to do it, which does not require you to duplicate the logic from the dir-paginate expression:

For each repeated item, you could just push that item into an array in your controller. This will of course give you all the items for that page.

Here is an example:

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

Then in the controller:

$scope.addMeal = function(meal) {
  if (meal) {
    if ($scope.page.length === $scope.pageSize + 1) {
      $scope.page = [];
    }
    $scope.page.push(meal);
  }
}

I've not expensively tested it, but the general principle should work. It's a bit hacky in my opinion, but it's worth knowing as an alternative to the answer provided by Rathish.

Answer 3

Yes we can create our own logic according to data.

Displaying {{ pageSize * (currentPage-1)+$index+1 }} - {{ pageSize*currentPage }} of {{ perman.length }}

Answer 4

You can use array slice method since you already have access to the large array, know which page number you are on and know the number of elements per page. You can reuse the getPage function in the below code to achieve this.

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.currentPage = 1;
  $scope.pageSize = 5;
  var meals = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

  function getPage(currentPage, pageSize, arr, reverse) {  
    var beginIndex, endIndex, noOfPages;

    if(reverse) {
       beginIndex = arr.length - currentPage * pageSize;  
    } else {
      beginIndex = currentPage * pageSize - pageSize;
    }

    endIndex = beginIndex + pageSize;
    beginIndex = beginIndex < 0 ? 0 : beginIndex;
    return arr.slice(beginIndex, endIndex);
  }

  //This will return the 5 elements in page 1 of meals array which will be meals 11 to 15 since the array is bound to the pagination directive in the reverse (desc) order
  $scope.firstFiveArrRev = getPage($scope.currentPage, $scope.pageSize, meals, true);

  //This will return the 5 elements in page 1 of meals array which will be meals 1 to 5 since the array is bound to the pagination directive in ascending order
  $scope.firstFiveArr = getPage($scope.currentPage, $scope.pageSize, meals, false);
});

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.0/angular.js" data-semver="1.4.0-rc.0"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    Displaying elements from page number {{currentPage}}
    <br />
    Page size is set to {{pageSize}}
    <br />
    When order is Reverse: true
    <div>{{ firstFiveArrRev.toString() }}</div>

    When order is Reverse: false
    <div>{{ firstFiveArr.toString() }}</div>
  </body>

</html>

Here is the plnkr

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

Answer 5

1. Download dirPagination.js from here.

2. Now include dirPagination.js to your page.

3. Add angularUtils.directives.dirPagination in your module like this

var app = angular.module("myApp",['angularUtils.directives.dirPagination']);

4. We use dir-paginate directive for pagination ,add dir-paginate in tr tag

<tr dir-paginate="event in events|orderBy:['columnid', 't']:true | itemsPerPage: 5">

5. Add below given code anywhere on your page or where ever you want.

<dir-pagination-controls
                max-size="5"
                direction-links="true"
                boundary-links="true" >
</dir-pagination-controls>