Hi All,

This blog is about pagination and searching in angularjs.

In web applications, we have large amount of data to display and generally we use tables and lists.Searching and pagination makes it easy and user friendly.

First lets start with the file setup.

• Create a new project in ionic framework.
• app.js,angular.js,controller.js file included automatically in our index.html.
• Where app.js file will contain angular module.
• controller.js file will contain controller and js code.
• We have injected $scope and $http in our controller.

angular.module('paginationApp.controllers', [])

.controller('DemoCtrl', function($scope, $http){})

• Include some bootstrap.css file.
• We have a demo.json file which contains data into json format.We will make an Ajax request using $http and fetch the data into a $scope variable.

$http.get("demoJson/demo.json").success(function(response){
        $scope.usersInfo = response;  //ajax request to fetch data into $scope.data
    });

Implement Pagination Feature

Angular has no built in functionality for Pagination.Now angular introduce some third party libraries for pagination.We are using dirPagination in our demo.
Implement pagination to the application first we need to include dirPagination.js file to our index.html.
To get dirPagination library you can download it by running-

bower install angular-utils-pagination

Or you can download it manually from below link:
dirPagination.js
After include the above dirPagination.js into index.html then add angularUtils.directives.dirPagination as dependency to the module.

<script src="js/dirPagination.js"></script>

angular.module('paginationApp', ['angularUtils.directives.dirPagination]

For pagination we can use dir-paginate directive.This directive work as ng-repeat.Now we will use itemsPerPage filter provide by this directive. This creates difference between ng-repeat and dir-pagination directive.
itemPerPage is used for display items per page.

<tr dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
                            <td>{{user.id}}</td>
                            <td>{{user.first_name}}</td>
                            <td>{{user.last_name}}</td>
                            <td>{{user.hobby}}</td>
                        </tr>

Now dir-pagination-controls uses for controls the pagination which provides by dirPagination.Now we can navigate our table to different pages.

<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" > </dir-pagination-controls>

max-size=“5” Used to display maximum number of pages.
direction-links=“true” Direction links are use for create Next page and previous page links which can be  true/false.
boundary-links=“true”  Boundry links are use for create First page and last page links which can be true/false.

Implement Search Feature
Now add some filters for our users which performs searching on table data.
For searching data from table we need to create an input box where we can type keyword for searching.
Add a search bar above the table
 

<form class="form-inline">
                    <div class="form-group">
                        <label >Search</label>
                        <input type="text" ng-model="search" class="form-control" placeholder="Search">
                    </div>
                </form>

In the above search functionality we use ng-model="search" after which we need to add a filter into dir-paginate statement given below.

dir-paginate="user in users|filter:search

Complete example:

HTML Code:

<ion-view>
    <ion-content class="container theme-showcase">
        <div class="row">
            <div class="col col-100">
                <h2 id="tables">Search and Pagination in Angular js</h2>
            </div>
        </div>
        <div class="row">
            <div class="col col-100">
                <form class="form-inline">
                    <div class="form-group">
                        <label >Search</label>
                        <input type="text" ng-model="search" class="form-control" placeholder="Search">
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col col-100">
                <table class="table table-striped table-hover">
                     <thead>
                        <tr>
                            <th>Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Hobby</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr dir-paginate="user in users|filter:search|itemsPerPage:5">
                            <td>{{user.id}}</td>
                            <td>{{user.first_name}}</td>
                            <td>{{user.last_name}}</td>
                            <td>{{user.hobby}}</td>
                        </tr>
                    </tbody>
                </table> 
            </div>
        </div>

        <div class="row">
            <div class="col col-100">
                <dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" > </dir-pagination-controls>
            </div>
        </div>
    </ion-content>
</ion-view>

Javascript Code:

angular.module('paginationApp.controllers', [])

.controller('DemoCtrl', function($scope, $http){
    $scope.users = []; //declare an empty array
    $http.get("demoJson/demo.json").success(function(response){ 
        $scope.users = response;  //ajax request to fetch data into $scope.data
    });
});

Hope this will help you.... :)