Client side pagination in ng-repeat using Angularjs

Client side pagination in ng-repeat using Angularjs

In this Post We Will Explain About is Client side pagination in ng-repeat using Angularjs With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Client Side Pagination with Custom Filters and Angular UI

In this post we will show you Best way to implement Implementing pagination using AngularJS at Client side, hear for How to Search Sort and Pagination in ng-repeat – AngularJS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Implementing pagination using AngularJS at Client side

Angular js providing a simple very easy way to do browser json to client side pagination.steps to Here i am going to explain step by step about simple client side latest simple pagination using angularjs.

angular.module('liveApp').controller( 'liveCtrl',
function ($rootScope, $scope ,samplefactoryService )
{

// pagination global settings
 $scope.currentPageval = 0;
 $scope.pageSize = 5;

$scope.onSample = function()
{
 samplefactoryService.myServicefunction( $scope.list ,
 function(data)
 {
 $scope.productList = data ;//here response from service
 },
 function( data)
 {
  //some error
 });
};

$scope.numberOfPages = function() 
 {
 return Math.ceil($scope.productList.length / $scope.pageSize);
 };

});
 

HTML ( View ) – Client side pagination using angular js

<ul>
 <li>
 <div>{{ datalist.name }}</div> // your content
 </li>
</ul> 

Pagination div : angularjs – Client side pagination using angular js

<div class="pagination-div">
<ul>
 <li>
  <button type="button">PREV</button>
 </li>
 <li>
 <span>Page {{currentPageval + 1}} of {{ numberOfPages() }}</span>
 </li>
 <li>
 <button type="button">= productList.length/pageSize - 1"
 ng-click="currentPageval = currentPageval+1">NEXT </button>
 </li>
</ul>
</div>

Directive

we can declare this in simple filter.js or controller using angularjs itself .Better way to define this in directive using angularjs.

angular.module('liveApp').filter('pagination', function()
{
 return function(input, start)
 {
  start = +start;
  return input.slice(start);
 };
});
 

Example

I hope you have Got Pagination with Spring REST and AngularJS Table And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.