Introduction
In my previous article, we demonstrated how to implement pagination with setting static limit of records. In this blog we will demonstrate how to set the limit of record dynamically with help of $limitTo filter.
Getting Started
We all are know that the AngularJS built in $limitTo filter is used to limit the number of record or string to display in an array or a collection. Fore this reason in my previous article I have used this $limitTo filter for implementing pagination in html table, but there we can see I have used a static number that is 5.
<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>
Summary
Hope this article may helpful to you, happy coding and enjo.........y.
Thanks
Kailash Chandra Behera
No comments:
Post a Comment