Kailash's Blogs (Angular Journey): Pagination in AngularJs

Introduction

Pagination is not built in feature in AngularJS, this article demonstrates how to implement simple pagination in AngularJS.

Getting Started

All are we know that pagination is not built in feature in AngularJS, but it can be achieved by using some built in filter that AngularJS provides and by create custom filter.

For achieving pagination this demonstrator has used AngularJS 'limitTo' filter and have created a custom filter named displayPageData. This custom filter takes page number as input for focusing to next page.

Example:-

This example creates simple pagination with list of student data, a table and two button(Previous and Next) for focusing to next or previous page. For displaying 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 first page then Previous button disables and when current page is last then Next button disables. For more details about the demonstrator, please go through the code example.

 <HTML ng-app = "myapp">  
       <TITLE> AngularJS Learning(anchoScroll)</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){  
                     $scope.currentPage = 0;  
             $scope.students=[  
             {Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},  
             {Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},  
             {Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},  
             {Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},  
             {Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},  
             {Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"},  
             {Name:"test student1",Gender:"male",Class:"1std",Section:"a"},  
             {Name:"Test Student2",Gender:"Male",Class:"2nd",Section:"B"},  
             {Name:"Test Student3",Gender:"Male",Class:"3rd",Section:"C"},  
             {Name:"Test Student4",Gender:"Male",Class:"1Std",Section:"A"},  
             {Name:"Test Student5",Gender:"Male",Class:"2nd",Section:"B"},  
             {Name:"Test Student6",Gender:"Male",Class:"3rd",Section:"C"},  
             {Name:"Test Student7",Gender:"Male",Class:"1Std",Section:"A"},  
             {Name:"Test Student8",Gender:"Male",Class:"2nd",Section:"B"},  
             {Name:"Test Student9",Gender:"Male",Class:"3rd",Section:"C"},  
             {Name:"Test Student10",Gender:"Male",Class:"1Std",Section:"A"},  
             {Name:"Test Student11",Gender:"Male",Class:"2nd",Section:"B"},  
             {Name:"Test Student12",Gender:"Male",Class:"3rd",Section:"C"},  
             {Name:"Test Student13",Gender:"Male",Class:"1Std",Section:"A"},  
             {Name:"Test Student14",Gender:"Male",Class:"2nd",Section:"B"},  
             {Name:"Test Student15",Gender:"Male",Class:"3rd",Section:"C"},  
             {Name:"Test Student16",Gender:"Male",Class:"1Std",Section:"A"},  
             {Name:"Test Student17",Gender:"Male",Class:"2nd",Section:"B"},  
             {Name:"Test Student18",Gender:"Male",Class:"3rd",Section:"C"},  
             {Name:"Test Student19",Gender:"Male",Class:"1Std",Section:"A"},  
             {Name:"Test Student20",Gender:"Male",Class:"2nd",Section:"B"},  
             {Name:"Test Student21",Gender:"Male",Class:"3rd",Section:"C"},  
             {Name:"Test Student22",Gender:"Male",Class:"1Std",Section:"A"},  
             {Name:"Test Student23",Gender:"Male",Class:"2nd",Section:"B"},  
             {Name:"Test Student24",Gender:"Male",Class:"3rd",Section:"C"},  
             {Name:"Test Student25",Gender:"Male",Class:"1Std",Section:"A"},  
             {Name:"Test Student26",Gender:"Male",Class:"2nd",Section:"B"}];  
             });  
       </script>  
       <BODY ng-controller="myappcont">  
           <h2>Student List</h2>  
           <hr/>  
           <table border="1" style="width:80%">  
                <caption>  
                     <table width="100%">  
                          <tr>  
                               <th width="10%">  
                                    <button alignment="left" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>  
                               </th>  
                               <th width="80%"></th>  
                               <th width="10%">  
                                    <button alignment="left" ng-disabled="currentPage >= students.length/5 - 1" ng-click="currentPage=currentPage+1">Next</button>  
                               </th>  
                          </tr>  
                     </table>  
                </caption>  
                <thead>  
                     <tr>  
                          <th>Name</th>  
                          <th>Gender</th>  
                          <th>Class</th>  
                          <th>Section</th>  
                     </tr>  
                </thead>  
                <tbody>  
                     <tr ng-repeat="student in students|displayPageData:currentPage*5|limitTo:5">  
                          <td>{{student.Name}}</td>  
                          <td>{{student.Gender}}</td>  
                          <td>{{student.Class}}</td>  
                          <td>{{student.Section}}</td>  
                     </tr>  
                </tbody>  
                <tfoot>  
                     {{currentPage}}of {{students.length/5| number:0}}  
                </tfoot>  
        </table>  
      </BODY>  
  </HTML>