How to setup a Paging Control for the grid in AngularJS

we can treat the table as the grid in AngularJS. however, we will encounter the performance issue when the number of rows exeed 100 or more.

it is best to use pagination from AngularJs to load only specifc number of records to improve the performan

we can put the following code below the table content. the page control will be properly rendered and ready to use.

 <div style="float:right">
                <pagination boundary-links="true" max-size="10" items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" ng-change="pageChanged()"></pagination>
            </div>


you only have to define the values for the following attribute.

total-items: the total number of records that meets the criteria and will be loaded.

ng-model: Page number,which is the number displayed in the paging control. we will use this to determine the rows will be loaded into UI.

max-size: the total number of page number will be shown in the paging control. in my case there is 10, it will show 1 to 10 in the page control. when user click on the advance button, it will show the next 10, like 10 to 20

ng-change: the javascript function to handle the event on user clicks on the page number in the paging control. the table content will be changed and the specifc number of rows will be loaded


in my snippet of code like this

$scope.pageChanged = function () {
      //console.log('Page changed to: ' + $scope.currentPage);
      myService.getMyTableContentByPageNumber($scope);
  };