How to do paging in AngularJS?

I've had to implement pagination quite a few times with Angular, and it was always a bit of a pain for something that I felt could be simplified. I've used some of the ideas presented here and elsewhere to make a pagination module that makes pagination as simple as:

<ul>

    <li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>

</ul>



// then somewhere else on the page ....



<dir-pagination-controls></dir-pagination-controls>

That's it. It has the following features:

No custom code needed in your controller to tie the collection items to the pagination links.
You aren't bound to using a table or gridview - you can paginate anything you can ng-repeat!
Delegates to ng-repeat, so you can use any expression that could be validly used in an ng-repeat, including filtering, ordering etc.
Works across controllers - the pagination-controls directive does not need to know anything about the context in which the paginate directive is called.

3 years ago

Check out UI Bootstrap's pagination directive.
View

<!-- table here -->



<pagination 

  ng-model="currentPage"

  total-items="todos.length"

  max-size="maxSize"  

  boundary-links="true">

</pagination>



<!-- items/page select here if you like -->

Controller

todos.controller("TodoController", function($scope) {

   $scope.filteredTodos = []

  ,$scope.currentPage = 1

  ,$scope.numPerPage = 10

  ,$scope.maxSize = 5;



  $scope.makeTodos = function() {

    $scope.todos = [];

    for (i=1;i<=1000;i++) {

      $scope.todos.push({ text:"todo "+i, done:false});

    }

  };

  $scope.makeTodos(); 



  $scope.$watch("currentPage + numPerPage", function() {

    var begin = (($scope.currentPage - 1)  $scope.numPerPage)

    , end = begin + $scope.numPerPage;



    $scope.filteredTodos = $scope.todos.slice(begin, end);

  });

});

I have made a working plunker for reference.

Legacy Version:
View

<!-- table here -->



<div data-pagination="" data-num-pages="numPages()" 

  data-current-page="currentPage" data-max-size="maxSize"  

  data-boundary-links="true"></div>



<!-- items/page select here if you like -->

Controller

todos.controller("TodoController", function($scope) {

   $scope.filteredTodos = []

  ,$scope.currentPage = 1

  ,$scope.numPerPage = 10

  ,$scope.maxSize = 5;



  $scope.makeTodos = function() {

    $scope.todos = [];

    for (i=1;i<=1000;i++) {

      $scope.todos.push({ text:"todo "+i, done:false});

    }

  };

  $scope.makeTodos(); 



  $scope.numPages = function () {

    return Math.ceil($scope.todos.length / $scope.numPerPage);

  };



  $scope.$watch("currentPage + numPerPage", function() {

    var begin = (($scope.currentPage - 1)  $scope.numPerPage)

    , end = begin + $scope.numPerPage;



    $scope.filteredTodos = $scope.todos.slice(begin, end);

  });

});

3 years ago

For anyone who find it difficult like me to create a paginator for a table I post this. So, in your view :

          <pagination total-items="total" items-per-page="itemPerPage"    ng-model="currentPage" ng-change="pageChanged()"></pagination>    

        <!-- To specify your choice of items Per Pages-->

     <div class="btn-group">

                <label class="btn btn-primary" ng-model="radioModel"  btn-radio="'Left'" data-ng-click="setItems(5)">5</label>

                <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'" data-ng-click="setItems(10)">10</label>

                <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'" data-ng-click="setItems(15)">15</label>

            </div>

     //And don't forget in your table:

      <tr data-ng-repeat="p in profiles | offset: (currentPage-1)itemPerPage | limitTo: itemPerPage" >

In your angularJs:

  var module = angular.module('myapp',['ui.bootstrap','dialogs']);

  module.controller('myController',function($scope,$http){

   $scope.total = $scope.mylist.length;     

   $scope.currentPage = 1;

   $scope.itemPerPage = 2;

   $scope.start = 0;



   $scope.setItems = function(n){

         $scope.itemPerPage = n;

   };

   // In case you can replace ($scope.currentPage - 1) * $scope.itemPerPage in <tr> by "start"

   $scope.pageChanged = function() {

        $scope.start = ($scope.currentPage - 1)  $scope.itemPerPage;

            };  

});

   //and our filter

     module.filter('offset', function() {

              return function(input, start) {

                start = parseInt(start, 10);

                return input.slice(start);

              };

            });     

3 years ago