Post
Ask Question

Pagination In Angular

We know that pagination is not a built-in feature of AngularJS but it can be achieved by using some built-in filters that AngularJS provides and by creating some custom filter if needed.

For pagination, this demonstration has used AngularJS 'limitTo' filter and has created a custom filter named displayPageData. This custom filter takes page number as input for focusing on the next page.

Example

This example creates a simple pagination with a list of students' data, a table, and two buttons (Previous and Next) for focusing on the next or previous page. For displaying the student list, it has used ng-repeat and for pagination, it has used limiTo filter and a custom filter.

In this demonstration, when the current page is the first page, then the Previous button gets disabled and when the current page is last, then the Next button is disabled. For more details of the demonstrator, please go through the code example.
  1. <HTML ng-app = "myapp">    
  2.        <TITLE> AngularJS Learning(anchoScroll)</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){    
  13.                      $scope.currentPage = 0;    
  14.              $scope.students=[    
  15.              {Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},    
  16.              {Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},    
  17.              {Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},    
  18.              {Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},    
  19.              {Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},    
  20.              {Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"},    
  21.              {Name:"test student1",Gender:"male",Class:"1std",Section:"a"},    
  22.              {Name:"Test Student2",Gender:"Male",Class:"2nd",Section:"B"},    
  23.              {Name:"Test Student3",Gender:"Male",Class:"3rd",Section:"C"},    
  24.              {Name:"Test Student4",Gender:"Male",Class:"1Std",Section:"A"},    
  25.              {Name:"Test Student5",Gender:"Male",Class:"2nd",Section:"B"},    
  26.              {Name:"Test Student6",Gender:"Male",Class:"3rd",Section:"C"},    
  27.              {Name:"Test Student7",Gender:"Male",Class:"1Std",Section:"A"},    
  28.              {Name:"Test Student8",Gender:"Male",Class:"2nd",Section:"B"},    
  29.              {Name:"Test Student9",Gender:"Male",Class:"3rd",Section:"C"},    
  30.              {Name:"Test Student10",Gender:"Male",Class:"1Std",Section:"A"},    
  31.              {Name:"Test Student11",Gender:"Male",Class:"2nd",Section:"B"},    
  32.              {Name:"Test Student12",Gender:"Male",Class:"3rd",Section:"C"},    
  33.              {Name:"Test Student13",Gender:"Male",Class:"1Std",Section:"A"},    
  34.              {Name:"Test Student14",Gender:"Male",Class:"2nd",Section:"B"},    
  35.              {Name:"Test Student15",Gender:"Male",Class:"3rd",Section:"C"},    
  36.              {Name:"Test Student16",Gender:"Male",Class:"1Std",Section:"A"},    
  37.              {Name:"Test Student17",Gender:"Male",Class:"2nd",Section:"B"},    
  38.              {Name:"Test Student18",Gender:"Male",Class:"3rd",Section:"C"},    
  39.              {Name:"Test Student19",Gender:"Male",Class:"1Std",Section:"A"},    
  40.              {Name:"Test Student20",Gender:"Male",Class:"2nd",Section:"B"},    
  41.              {Name:"Test Student21",Gender:"Male",Class:"3rd",Section:"C"},    
  42.              {Name:"Test Student22",Gender:"Male",Class:"1Std",Section:"A"},    
  43.              {Name:"Test Student23",Gender:"Male",Class:"2nd",Section:"B"},    
  44.              {Name:"Test Student24",Gender:"Male",Class:"3rd",Section:"C"},    
  45.              {Name:"Test Student25",Gender:"Male",Class:"1Std",Section:"A"},    
  46.              {Name:"Test Student26",Gender:"Male",Class:"2nd",Section:"B"}];    
  47.              });    
  48.        </script>    
  49.        <BODY ng-controller="myappcont">    
  50.            <h2>Student List</h2>    
  51.            <hr/>    
  52.            <table border="1" style="width:80%">    
  53.                 <caption>    
  54.                      <table width="100%">    
  55.                           <tr>    
  56.                                <th width="10%">    
  57.                                     <button alignment="left" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>    
  58.                                </th>    
  59.                                <th width="80%"></th>    
  60.                                <th width="10%">    
  61.                                     <button alignment="left" ng-disabled="currentPage >= students.length/5 - 1" ng-click="currentPage=currentPage+1">Next</button>    
  62.                                </th>    
  63.                           </tr>    
  64.                      </table>    
  65.                 </caption>    
  66.                 <thead>    
  67.                      <tr>    
  68.                           <th>Name</th>    
  69.                           <th>Gender</th>    
  70.                           <th>Class</th>    
  71.                           <th>Section</th>    
  72.                      </tr>    
  73.                 </thead>    
  74.                 <tbody>    
  75.                      <tr ng-repeat="student in students|displayPageData:currentPage*5|limitTo:5">    
  76.                           <td>{{student.Name}}</td>    
  77.                           <td>{{student.Gender}}</td>    
  78.                           <td>{{student.Class}}</td>    
  79.                           <td>{{student.Section}}</td>    
  80.                      </tr>    
  81.                 </tbody>    
  82.                 <tfoot>    
  83.                      {{currentPage}}of {{students.length/5| number:0}}    
  84.                 </tfoot>    
  85.         </table>    
  86.       </BODY>    

  88.   </HTML>    
 
Next Recommended Reading Exception - Could Not Find Module “@angular-devkit/build-angular”