Pagination is essential when dealing with large datasets in web applications. It improves performance and enhances user experience by loading a manageable number of records per page. In AngularJS, one simple way to achieve basic pagination is by using the built-in $limitTo filter.
In this post, we’ll explore how to implement pagination using $limitTo, discuss its pros and cons, and provide an example.
Pagination with $limitTo filter
Getting Started
Pagination breaks a large dataset into smaller chunks (pages). Each page displays a fixed number of items (pageSize), and users can navigate between pages. With $limitTo, pagination can be mimicked by slicing the array based on the current page number and page size.
The $limitTo filter in AngularJS limits an array or a string to a specified number of elements or characters. It is commonly used in templates to control how many items are shown from a collection.
{{ array | limitTo: limit : begin }}
limit: Number of items to return (positive or negative)begin(optional): The starting index (default is 0)
<HTML ng-app = "myapp">
<TITLE> AngularJS Learning(Pagination with $limitTo filter)</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.filter('displayPageData', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
myapp.controller("myappcont",function($scope,$filter){
$scope.currentPage = 0;
$scope.searchText='';
$scope.pageSize=10;
$scope.students=[];
for (var i=1; i<=100; i++) {
if( i % 2 == 0){
$scope.students.push({Name:"Student"+i,Gender:"Male",Class:i+"Std",Section:"A"});
}
else{
$scope.students.push({Name:"Student"+i,Gender:"Female",Class:i+"Std",Section:"B"});
}
}
$scope.numberOfPages=function(){
var pageno=($filter('filter')($scope.students, $scope.searchText)).length/$scope.pageSize;
if(pageno==0){
pageno++;
}
return pageno;
}
$scope.numberOfItems=function(){
return ($filter('filter')($scope.students, $scope.searchText)).length; }
});
</script>
<BODY ng-controller="myappcont">
<h2>Student List</h2>
<hr/>
<table border="1" style="width:60%">
<caption>
Search : <input type="text" placeholder="Enter to search record" ng-model="searchText"/>
No of Rows : <input type="number" step=5 min=5 max=20 ng-model="pageSize"/>
</caption>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Class</th>
<th>Section</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students|filter:searchText|displayPageData:currentPage*pageSize|limitTo:pageSize">
<td>{{student.Name}}</td>
<td>{{student.Gender}}</td>
<td>{{student.Class}}</td>
<td>{{student.Section}}</td>
</tr>
</tbody>
</table>
<table width="60%">
<tr>
<th width="10%">
<button alignment="left" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
</th>
<th width="80%">{{currentPage+1}}of {{numberOfPages()| number:0}}</th>
<th width="10%">
<button alignment="left" ng-disabled="currentPage >= numberOfItems()/pageSize-1" ng-click="currentPage=currentPage+1">Next</button>
</th>
</tr>
</table>
</BODY>
</HTML>
How It Works
- The
ng-repeatdirective is used to loop through the list of items. $limitTo: pageSize : (currentPage - 1) * pageSizeslices the array:pageSizecontrols how many items per page.(currentPage - 1) * pageSizecalculates the starting index for the current page.
- Navigation buttons update
currentPage.
Summary
Using the $limitTo filter is a fast and lightweight solution for client-side pagination in AngularJS. While it's not suitable for all scenarios — especially large or dynamic datasets — it's perfect for smaller applications where simplicity is key.
Thanks