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