Implementing pagination using AngularJS at Client side
Posted By : Rohit Sharma | 31-Dec-2014
AngularJS providing a very easy way to do client side pagination.
In controller we have to assigning the json data to Datalist.
angular.module('sampleproject').controller( 'SampleController',
function ($rootScope, $scope ,samplefactoryService )
{
// pagination
$scope.curPage = 0;// current Page
$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);
};
});
Pagination div
- Page {{curPage + 1}} of {{ numberOfPages() }}
Directive
You can declare this in filter.js or controller itself .
angular.module('sampleproject').filter('pagination', function()
{
return function(input, start)
{
start = +start;
return input.slice(start);
};
});
HTML :-
-
{{ datalist.name }}// your content
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Sharma
Rohit is a Groovy and Grails developer. Rohit likes playing pool and chess.