AngularJS Client-Side Pagination
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-controller="PaginationController">
<select ng-model="pageSize" ng-change="selectLimit(pageSize)">
<option ng-repeat="data in paginationLimit" value="{{data.value}}">{{data.value}}</option>
</select>
<ul>
<li ng-repeat="customer in pagedData | limitTo:pageSize">
{{customer}}
</li>
</ul>
<button ng-disabled="pageButtonDisabled(-1)" ng-click="paginate(-1)">Previous</button>
<button ng-disabled="pageButtonDisabled(1)" ng-click="paginate(1)">Next</button>
<br /><br />
Page {{currentPage+1}} of {{totalPages}}
</div>
JavaScript
var app=angular.module('paginationModule', []);
app.controller('PaginationController', function($scope, dataFactory) {
//Client-side pagination example
$scope.currentPage = 0;
//$scope.pageSize =10
$scope.totalPages = 0;
$scope.pagedData = [];
$scope.paginationLimit = [{value: 10},
{value: 20},
{value: 30},
{value: 50},
{value: 100},
{value: 200}];
$scope.pageSize = $scope.paginationLimit[0].value;
$scope.pageButtonDisabled = function(dir) {
if (dir == -1) {
return $scope.currentPage == 0;
}
return $scope.currentPage >= dataFactory.data.length/$scope.pageSize - 1;
}
$scope.paginate = function(nextPrevMultiplier) {
$scope.currentPage += (nextPrevMultiplier * 1);
$scope.pagedData = dataFactory.data.slice($scope.currentPage*$scope.pageSize);
}
function init() {
$scope.totalPages = Math.ceil(dataFactory.data.length/$scope.pageSize);
$scope.pagedData = dataFactory.data;
}
init();
});
app.factory('dataFactory', function() {
var factory = {};
factory.data = [];
//Fill with fake data
function init() {
for (var i=0; i<92; i++) {
factory.data.push("Customer "+i);
}
}
init();
return factory;
});