AngularJS implementing pagination.

In this post I have implemented simple pagination in angular js. Please follow the following steps:

Step 1: Download pagination libraries from the following link:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination.

Note : you only have to download two files from this link:
1. dirPagination.js
2. dirPagination.tpl.html.

Step 2: Drag dirPagination.js in your main view. For example my main view is index.html and I have dragged there this file.

Step 3: Now add "angularUtils.directives.dirPagination" in the app.js file as following:

var myApp = angular.module("myApp", ["ngRoute", "ngStorage", 'requestUtils',"ngDialog","angularUtils.directives.dirPagination"]);

Step 4: Now in the js controller file you need add following functions:

myApp.controller("itemCtrl", ["$scope", "$state", function ($scope, $state) {
       
        $scope.currentPage = 1;

        $scope.pageSize = 10;

        $scope.pageChangeHandler = function (newPageNumber) {
            debugger;
        //Here you can write the code to make ajax and get the records from database according to currentPage and page size.
        }
}]);

Step 5: In the html view where you want to implement pagination please follow following:

<div class="col-md-3">
                <input type="text" class="form-control" placeholder="Search Text" name="inputSearch" value="" ng-model="searchKeyword" />
  </div>
<div>
<table class="table table-condensed">
    <thead>
        <tr>
         <th>Id</th>
            <th>Name</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr dir-paginate="item in vm.items | filter : searchKeyword | itemsPerPage: pageSize" current-page="currentPage">
           <td>{{item.Id}}</td>
            <td>{{item.Name}}</td>
            <td>{{item.Qty}}</td>
        </tr>
    </tbody>
    <tfoot class="text-center">
        <tr ng-show="vm.items.length !=0">
            <td colspan="10">
                <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="/dirPagination.tpl.html"></dir-pagination-controls>
            </td>
        </tr>
        <tr ng-show="vm.items.length==0">
            <td colspan="10" class="text-center">No record found.</td>
        </tr>
    </tfoot>
</table>
</div>
</div>


Note : You need to place dirPagination.tpl.html somewhere in your project and set its path in like "template-url="/dirPagination.tpl.html". This template render the html for the pagination.