Pagination with $limitTo filter

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.

This article demonstrates how to set that limit to dynamic for limit of record to display in pagination. Go through the below code example for more details

 <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

An IT professional with over 13 years of experience in the full software development life cycle for Windows, services, and web-based applications using Microsoft .NET technologies. Demonstrated expertise in delivering all phases of project development—from initiation to closure—while aligning with business objectives to drive process improvements, competitive advantage, and measurable bottom-line gains. Proven ability to work independently and manage multiple projects successfully. Committed to the efficient and effective development of projects in fast-paced, deadline-driven environments. Skills: Proficient in designing and developing applications using various Microsoft technologies. Total IT Experience: 13+ years

Previous Post Next Post

نموذج الاتصال