Pagination with $limitTo filter

Pagination is essential when dealing with large datasets in web applications. It improves performance and enhances user experience by loading a manageable number of records per page. In AngularJS, one simple way to achieve basic pagination is by using the built-in $limitTo filter.

In this post, we’ll explore how to implement pagination using $limitTo, discuss its pros and cons, and provide an example.

Pagination with $limitTo filter

Getting Started

Pagination breaks a large dataset into smaller chunks (pages). Each page displays a fixed number of items (pageSize), and users can navigate between pages. With $limitTo, pagination can be mimicked by slicing the array based on the current page number and page size.

The $limitTo filter in AngularJS limits an array or a string to a specified number of elements or characters. It is commonly used in templates to control how many items are shown from a collection.

Syntax:

 {{ array | limitTo: limit : begin }}

limit: Number of items to return (positive or negative)
begin (optional): The starting index (default is 0)

Code Example:

 <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>

How It Works

The ng-repeat directive is used to loop through the list of items.
$limitTo: pageSize : (currentPage - 1) * pageSize slices the array:
- pageSize controls how many items per page.
- (currentPage - 1) * pageSize calculates the starting index for the current page.
Navigation buttons update currentPage.

Summary

Using the $limitTo filter is a fast and lightweight solution for client-side pagination in AngularJS. While it's not suitable for all scenarios — especially large or dynamic datasets — it's perfect for smaller applications where simplicity is key.

Thanks

Pagination with $limitTo filter

Pagination with $limitTo filter

Getting Started

How It Works

Summary

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