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

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


27 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
  4. 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

    ReplyDelete
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. This comment has been removed by the author.

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

    ReplyDelete
  12. 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
  13. thank you.. i have implemented and working fine.

    ReplyDelete
  14. Thank you , its a great tutorial.

    ReplyDelete
  15. 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
  16. 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
  17. sorry for the previous comment.. it is working perfectly.. thank you..

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

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

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

    ReplyDelete
  21. Thanks....Its very helpfull..

    ReplyDelete