There are so many approaches to do pagination in angularJs. But using factory service approach is one of the easiest approaches to do pagination with Server side data.
Let see the step by step demo for this
Step1: Create one app.js file and write the code related with Consuming external service and Pagination related code as given below
var app = angular.module("MyApp", []);
//This service can be changed for real time data consumption. For simiplicity we have kept this code.
app.factory("Item", function () {
var items = [];
for (var i = 1; i < 100; i++) {
items.push({ id: i, name: "ProductName " + i, description: "Description " + i });
}
return {
get: function (offset, limit) {
return items.slice(offset, offset + limit);
},
total: function () {
return items.length;
}
};
});
app.controller("PaginationCtrl", function ($scope, Item) {
$scope.itemsPerPage = 5;
$scope.currentPage = 0;
$scope.range = function () {
var rangeSize = 5;
var ret = [];
var start;
start = $scope.currentPage;
if (start > $scope.pageCount() - rangeSize) {
start = $scope.pageCount() - rangeSize;
}
for (var i = start; i < start + rangeSize; i++) {
ret.push(i);
}
return ret;
};
$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.prevPageDisabled = function () {
return $scope.currentPage === 0 ? "disabled" : "";
};
$scope.nextPage = function () {
if ($scope.currentPage < $scope.pageCount() - 1) {
$scope.currentPage++;
}
};
$scope.nextPageDisabled = function () {
return $scope.currentPage === $scope.pageCount() - 1 ? "disabled" : "";
};
$scope.pageCount = function () {
return Math.ceil($scope.total / $scope.itemsPerPage);
};
$scope.setPage = function (n) {
if (n > 0 && n < $scope.pageCount()) {
$scope.currentPage = n;
}
};
$scope.$watch("currentPage", function (newValue, oldValue) {
$scope.pagedItems = Item.get(newValue * $scope.itemsPerPage, $scope.itemsPerPage);
$scope.total = Item.total();
});
});
Step 2: Write the html code to render data and displaying pagination like given below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Pagination/angular.js"></script>
<script src="app.js"></script>
<link href="../Style/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="MyApp">
<div ng-controller="PaginationCtrl">
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>ProductName</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in pagedItems">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">
<div class="pagination">
<ul>
<li ng-class="prevPageDisabled()">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
<a href="#">{{n+1}}</a>
</li>
<li ng-class="nextPageDisabled()">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
</table>
</div>
</body>
</html>
Summary:
Here we saw that how to implement basic pagination functionality in AngularJs.
Chandradev's Blog 