Angular Pagination Directive

To implement paging in a table we need drpagination directive. 

It is available at drPagination

Edit in pulker

• We need to use dir-paginate instead of ng-repeat
• We can specify no of rows per page using the filter  itemsPerPage
• In  the script we need to have angular.module('myApp', ['angularUtils.directives.dirPagination'])

<table id="enrollmentList" class="table table-bordered table-striped table-hover" ng-show="enrollmentList.length > 0">
              <thead>
                <tr>
                  <th >StudentNo</th>

                  <th >FirstName</th>
                  </tr>
              </thead>
              <tbody>
                <tr class="rowclass" dir-paginate="enrollment in enrollmentList |filter:suspendedSitesearch|itemsPerPage:5">
                  <td width="10%">{{enrollment.StudentNo}}</td>
                  <td width="20%">{{enrollment.FirstName}}</td>
                 </tr>
              </tbody>
            </table>
            <dir-pagination-controls max-size="2" direction-links="true" boundary-links="true"></dir-pagination-controls>

Script

    var myAppModule = angular.module('myApp', ['angularUtils.directives.dirPagination']);
    myAppModule.controller('userCtrl', function ($scope) {
        $scope.enrollmentList =
        [
             { "StudentNo": "1", "FirstName": "Prathap"},
             { "StudentNo": "2","FirstName": "John"},
             { "StudentNo": "3","FirstName": "Peter"},

             { "StudentNo": "4", "FirstName": "Joe"},
             { "StudentNo": "5","FirstName": "Wayne"},
             { "StudentNo": "6","FirstName": "Roger"},

             { "StudentNo": "7", "FirstName": "Hans"},
             { "StudentNo": "8","FirstName": "Jaap"},
             { "StudentNo": "9","FirstName": "Michiko"}

        ];
});

Output