We all know that the AngularJS built-in $limitTo filter is used to limit the number of records or string to display in an array or a collection. For this reason, in my previous article, I have used this $limitTo filter for implementing the pagination in an HTML table, but there, we can see that I have used a static number,i.e., 5.

This article demonstrates how to set that limit to dynamic for a limit of record to display in pagination. Go through the below code example for more details.
  1. <HTML ng-app = "myapp">
  2. <TITLE> AngularJS Learning(Pagination with $limitTo filter)</TITLE>
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  4. <script>
  5. var myapp=angular.module("myapp",[]);
  6. myapp.filter('displayPageData', function() {
  7. return function(input, start) {
  8. start = +start; //parse to int
  9. return input.slice(start);
  10. }
  11. });
  12. myapp.controller("myappcont",function($scope,$filter){
  13. $scope.currentPage = 0;
  14. $scope.searchText='';
  15. $scope.pageSize=10;
  16. $scope.students=[];
  17. for (var i=1; i<=100; i++) {
  18. if( i % 2 == 0){
  19. $scope.students.push({Name:"Student"+i,Gender:"Male",Class:i+"Std",Section:"A"});
  20. }
  21. else{
  22. $scope.students.push({Name:"Student"+i,Gender:"Female",Class:i+"Std",Section:"B"});
  23. }
  24. }
  25. $scope.numberOfPages=function(){
  26. var pageno=($filter('filter')($scope.students, $scope.searchText)).length/$scope.pageSize;
  27. if(pageno==0){
  28. pageno++;
  29. }
  30. return pageno;
  31. }
  32. $scope.numberOfItems=function(){
  33. return ($filter('filter')($scope.students, $scope.searchText)).length; }
  34. });
  35. </script>
  36. <BODY ng-controller="myappcont">
  37. <h2>Student List</h2>
  38. <hr/>
  39. <table border="1" style="width:60%">
  40. <caption>
  41. Search : <input type="text" placeholder="Enter to search record" ng-model="searchText"/>
  42. No of Rows : <input type="number" step=5 min=5 max=20 ng-model="pageSize"/>
  43. </caption>
  44. <thead>
  45. <tr>
  46. <th>Name</th>
  47. <th>Gender</th>
  48. <th>Class</th>
  49. <th>Section</th>
  50. </tr>
  51. </thead>
  52. <tbody>
  53. <tr ng-repeat="student in students|filter:searchText|displayPageData:currentPage*pageSize|limitTo:pageSize">
  54. <td>{{student.Name}}</td>
  55. <td>{{student.Gender}}</td>
  56. <td>{{student.Class}}</td>
  57. <td>{{student.Section}}</td>
  58. </tr>
  59. </tbody>
  60. </table>
  61. <table width="60%">
  62. <tr>
  63. <th width="10%">
  64. <button alignment="left" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
  65. </th>
  66. <th width="80%">{{currentPage+1}}of {{numberOfPages()| number:0}}</th>
  67. <th width="10%">
  68. <button alignment="left" ng-disabled="currentPage >= numberOfItems()/pageSize-1" ng-click="currentPage=currentPage+1">Next</button>
  69. </th>
  70. </tr>
  71. </table>
  72. </BODY>
  73. </HTML>