Monday 28 April 2014

Angular js client side pagination like google.

Here we read about simple angular js client side pagination, now it’s time to do advanced client side pagination. Here i am going to explain about Pagination like google using angular js client side logic. First load all data to UI.

View

Here datalist is the data you are getting from service (backend).


<ul>
<li class="paginationclass" ng-repeat="datalist in datalists 
| pagination : currentPage*itemsPerPage | limitTo: itemsPerPage">
 
 <div>
 <span> Name : {{ datalist.name }}</span>
 <span> Age : {{ datalist.age }}</span>
 <span> Designation : {{ datalist.Designation }}</span>
 </div> 
</li>
</ul> 

Pagination div



<div class="pagination-div">
 
 <ul class="pagination">
  
  <li ng-class="DisablePrevPage()">
  
  <a href ng-click="prevPage()"> Prev</a>
  
  </li>
  
  <li ng-repeat="n in range()" 
  
  ng-class="{active: n == currentPage}"
  
  ng-click="setPage(n)">
  
  <a href="#">{{n+1}}</a>
  
  </li>
  
  <li ng-class="DisableNextPage()">
  
  <a href ng-click="nextPage()">Next </a>
  
  </li>
 
 </ul>

</div>


Controller

Here datalist is the data you are getting from service (backend).


 
 $scope.itemsPerPage = 5;
 
 $scope.currentPage = 0;
 
 $scope.datalists = data ;// Service
 
 

 

$scope.range = function() {

 var rangeSize = 4;

 var ps = [];

 var start;

 start = $scope.currentPage;

 if ( start > $scope.pageCount()-rangeSize ) {

  start = $scope.pageCount()-rangeSize+1;

  }

 for (var i=start; i<start+rangeSize; i++) {

 ps.push(i);

}

return ps;

};


$scope.prevPage = function() {

if ($scope.currentPage > 0) {

$scope.currentPage--;

}
};


$scope.DisablePrevPage = function() {

return $scope.currentPage === 0 ? "disabled" : "";

};


$scope.pageCount = function() {

return Math.ceil($scope.datalists.length/$scope.itemsPerPage)-1;

};


$scope.nextPage = function() {

if ($scope.currentPage > $scope.pageCount()) {

$scope.currentPage++;

}
};


$scope.DisableNextPage = function() {

return $scope.currentPage === $scope.pageCount() ? "disabled" : "";

};


$scope.setPage = function(n) {

$scope.currentPage = n;

};

Add all of these in your controller

Filter

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


angular.module('sampleapp').filter('pagination', function()
{
  return function(input, start) {
    start = parseInt(start, 10);
    return input.slice(start);
  };
});


Working Demo

As TomALex mentioned in the comment "i noticed is if you set "itemsPerPage" to 300, we will see -2,-1,0 in pagination."

For that fix , please refer this updated fiddle

Updated Fiddle

The fix was - Add a check before pushing 'i' in $scope.range function



for (var i=start; i<start+rangeSize; i++) {
     if(i>=0) 
        ps.push(i);
    }


 

1. Angular js simple client side pagination

2. Angular js simple show more pagination

Related Posts

1. Save highchart as binary image

2. Communicate with controllers in angular js

3. Angular routing

4. Rating Stars using angular js Directive concept

5. Loop concept in angular js

6. Filtering concept in angular js


22 comments :

  1. Great , But for huge data server side pagination is always best.

    Rea...

    ReplyDelete
  2. Do you have an example of same pagination with search feature?

    ReplyDelete
    Replies
    1. Anyone tried search with same set of Pagination.? I tried search using the following function..But its not working Properly.Anybody came accross this prob..?

      $scope.filter = function()
      {
      $timeout(function()
      {
      $scope.filteredItems = $scope.filtered.length;
      }, 10);
      };

      Delete
  3. One more thing i noticed is if you set "itemsPerPage" to 300, we will see -2,-1,0 in pagination.

    ReplyDelete
  4. Great buddy ...

    Thanks for sharing the jsfiddle .

    Will update the post with your changes .

    Many thanks :)

    ReplyDelete
  5. Hi!
    Youy jsfiddle sample is helpful and thanks for sharing! But I want to change your sample - if a user clicked page #2, 3 or 4, I want to keep pagination "1, 2, 3, 4" NOT 2, 3, 4, 5 or 3, 4, 5, 6. Only refresh if the last one is clicked.


    http://jsfiddle.net/prash/6tDvT/4/

    ReplyDelete
    Replies
    1. @Prashobh PS please reply this post

      Delete
    2. Change the range method to this:

      $scope.range = function() {
      var rangeSize = 11;
      var ret = [];
      var start;

      start = $scope.currentPage;
      var position = $scope.pageCount()-rangeSize;
      var midRange = parseInt(rangeSize/2);

      if(start <= midRange){
      start = 0;
      }

      if(start > midRange){
      start = start - midRange;
      }

      if ( start > position) {
      start = position + 1;
      }

      debugger;

      for (var i=start; i<start+rangeSize; i++) {
      ret.push(i);
      }
      return ret;
      };

      Delete
    3. You can change the $range method to this code:

      $scope.range = function() {
      var rangeSize = 11;
      var ret = [];
      var start;

      start = $scope.currentPage;
      var position = $scope.pageCount()-rangeSize;
      var midRange = parseInt(rangeSize/2);

      if(start <= midRange){
      start = 0;
      }

      if(start > midRange){
      start = start - midRange;
      }

      if ( start > position) {
      start = position + 1;
      }

      debugger;

      for (var i=start; i<start+rangeSize; i++) {
      ret.push(i);
      }
      return ret;
      };

      Delete
  6. nextpage button cannot be work.while am update that code of nextpage button as
    $scope.nextPage = function() {

    if ($scope.currentPage < $scope.pageCount()) {

    $scope.currentPage++;

    }
    };

    ReplyDelete
  7. HI thanks for this, it helps a lot, I have just one question, how can I make the pagination in to a service, as I want to create a site using multiple pages with pagination, and I don't wnat to duplicate the code in each controller.
    Thanks

    ReplyDelete
  8. can somebody help me to integrate this into controller and how to call this filter inside controller?

    ReplyDelete
  9. Thak you very much

    ReplyDelete
  10. In updated fiddle, Actually next and prev button are working but after clicking on page 1, 2 not working ...after adding {{n+1}} this It's work fine

    ReplyDelete
  11. Thank You very much, really help full for me

    ReplyDelete
  12. what if I want structure of pagination numbers like 1 2 3... 9 10 with same code.

    ReplyDelete
  13. What if I want pagination numbering structure like 1 2 3 ... 9 10

    ReplyDelete
  14. I need Server Side Pagination.If I have large amount of data. So how can I use it

    ReplyDelete