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

Showing content from http://www.angulartutorial.net/2014/03/client-side-pagination-using-angular-js.html below:

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.

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);
 };

});
 

 
<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>
  
 

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

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

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