Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://angulartutorial.blogspot.in/2014/04/angular-js-client-side-pagination-like.html below:

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.

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>

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

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4