Angular

Pagination In Angular With Angular Limit Filter

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>    
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs