Introduction
My previous article demonstrated how to implement pagination in AngularJS, this article demonstrates how to implement pagination with $filter(searching) server.
Getting Started
In AngularJS $filter service is used to search data in a table, in this article, we will implement a $filter for searching and maintain pagination. After implementing pagination logic, it is very easy to implement a $filter. But need to keep in mind that the page number should display based on the search.
For example, let's say there are 1000 records and after searching, you got 100 records. On each page you want to display 10 records, hence the number of pages should be displayed 10, not 100.
Getting accurate page number, use $filter first before implement your pagination logic with list of collection you want display in table other wise you will get invalid search data like below image. The below code example demonstrates how to implement pagination with search option.
Example:-
<HTML ng-app = "myapp">
<TITLE> AngularJS Learning(Pagination with searching)</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"/>
</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>
Summary
Hope this article may helpful to you, happy coding enjo...........y.
Thanks