Wednesday 5 March 2014

Client side pagination using angular js

Angular js providing a very easy way to do client side pagination.Here i am going to explain about simple client side pagination using angular js. I have explained the same using Angular 2(+) concept as well, if interested please check this link.

Example of Controller

In controller we are assigning the json data to datalist

Note: $scope.curPage and $scope.pageSize

 
angular.module('sampleproject').controller( 'SampleController',
function ($rootScope, $scope ,samplefactoryService )
{

// pagination
 $scope.curPage = 0;
 $scope.pageSize = 5;

$scope.onSample = function()
{
 samplefactoryService.myServicefunction( $scope.list ,
 function(data)
 {
 $scope.datalists = data ;// response from service
 },
 function( data)
 {
  //error
 });
};

$scope.numberOfPages = function() 
 {
 return Math.ceil($scope.datalists.length / $scope.pageSize);
 };

});
 

HTML ( View )

 
<ul>
 <li ng-repeat="datalist in datalists | 
 pagination: curPage * pageSize | limitTo: pageSize" >
 <div>{{ datalist.name }}</div> // your content
 </li>
</ul> 


Pagination div

 

<--Pagination div --->

<div class="pagination-div" ng-show="datalists.length">
<ul>
 <li>
  <button type="button" ng-disabled="curPage == 0"
 ng-click="curPage=curPage-1">PREV</button>
 </li>
 <li>
 <span>Page {{curPage + 1}} of {{ numberOfPages() }}</span>
 </li>
 <li>
 <button type="button"
 ng-disabled="curPage >= datalists.length/pageSize - 1"
 ng-click="curPage = curPage+1">NEXT </button>
 </li>
</ul>
</div>
  
 

Directive

You can declare this in filter.js or controller itself .Better define this in directive .

 
angular.module('sampleproject').filter('pagination', function()
{
 return function(input, start)
 {
  start = +start;
  return input.slice(start);
 };
});
 
 

You can modify the style for better look and feel

Working Demo

Play in Fiddle

1. Angular js client side pagination like Google

2. Angular js simple show more pagination

Related Posts

1. Communicate with controllers in angular js

2. Rating Stars using angular js Directive concept

3. Angular routing

4. Loop concept in angular js

5. Filtering concept in angular js

6. Save highchart as binary image


30 comments :

  1. fiddle tutorial is very needful..........thanx..

    ReplyDelete
  2. thanx........

    ReplyDelete
  3. I cant understand this part can u explain ??

    angular.module('sampleproject').filter('pagination', function()
    {
    return function(input, start)
    {
    start = +start;
    return input.slice(start);
    };
    });

    ReplyDelete
    Replies
    1. This is angular js custom filter , you can give any name ( i given pagination) with ur module name .You can create a separate filter.js file to keep these customized angular filters .

      For example this is another filter
      http://angulartutorial.blogspot.in/2014/04/date-filtering-and-formatting-in.html

      Delete
  4. Simple and works great, thanks! However, I'm getting an error that "input is undefined" and adding
    if (!input || !input.length) { return; }
    fixed the issue.

    angular.module('sampleproject').filter('pagination', function()
    {
    return function(input, start)
    {
    if (!input || !input.length) { return; }
    start = +start;
    return input.slice(start);
    };
    });

    ReplyDelete
  5. Thanks so much.. this is very helpful. Have one error though with the following code part------$scope.numberOfPages = function()
    {
    return Math.ceil($scope.datalists.length / $scope.pageSize);
    };

    });
    ---
    this generates following :Error: Error: [$interpolate:interr] Can't interpolate: Page {{curPage +1 }} of {{numberOfPages()}}
    it does this in a loop that does not seem to stop.
    Anyone else has this?

    ReplyDelete
  6. Thank you very much, really useful, I'd recommend to add @Harry Bundles's comment as part of the guide as it a common error.

    ReplyDelete
  7. Thank you for this very useful post. I used it in a recent project (I am learning AngularJS) and it was so helpful I mentioned it in my blog posting http://bit.ly/1Gzjcbu

    ReplyDelete
  8. Can anyone please help me in my below query

    I have DataTable grid on my page and deleting the row from it. After deleting the row I want to stay on same page index. To achieve this I use

    table.row('.selected').remove().draw( false );

    but it is not working in Angular.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Its really useful for me. thanks. http://www.phptutorials.club

    ReplyDelete
  11. It's really great, but what if I want to print all pages
    my code is as follow but it prints only first page

    $scope.printData= function()
    {
    console.log("print");
    var divToPrint=document.getElementById("reportTablePrint");
    newWin= window.open("");
    newWin.document.write(divToPrint.outerHTML);
    newWin.print();
    newWin.close();
    };

    ReplyDelete
  12. thank you.. i have implemented and working fine.

    ReplyDelete
  13. Thank you , its a great tutorial.

    ReplyDelete
  14. how to write multiselect checkbox in angularjs.any one help me.

    ReplyDelete
    Replies
    1. Are you looking something similar this
      http://www.angulartutorial.net/2015/10/angular-select-allde-select-all-checkbox.html

      Delete
  15. Hi Prashobh,
    It's working perfectly with the hard coded values in the controller. But it is failing when we get the data from server using $http ajax. can you please add some sample with ajax. Thanks in advance..

    ReplyDelete
  16. sorry for the previous comment.. it is working perfectly.. thank you..

    ReplyDelete
  17. Thanks a lot. The code is working fine:)

    ReplyDelete
  18. the css for pagination centered is missing.
    Can you please provide me the full css code

    ReplyDelete
  19. This tutorial is awesome..its working perfectly fine,Thanks a lot :)

    ReplyDelete
  20. Thanks....Its very helpfull..

    ReplyDelete
  21. ng-disable is not working,it's going to previous wlile in page 0 and data also showing in page 0 and also same for next button.

    ReplyDelete
  22. I get same set of data on all the Pages.It is Because
    app.filter('startFrom', function () {
    return function (input, start) {
    if (!input || !input.length) { return; }
    start = +start; //parse to int
    return input.slice(start);
    }
    });
    here start always gets 0 it is not getting incemented? Any Idea?

    ReplyDelete