Pagination

Pagination using Angular is a breeze! Check out the examples below.





The selected page no: {{currentPage}}

Pager

Limiting the maximum visible buttons



Page: {{bigCurrentPage}} / {{numPages}}

Source HTML for the demo:

<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>

<pre>The selected page no: {{currentPage}}</pre>
<button class="btn btn-info" ng-click="currentPage = 3">Set current page to: 3</button>

<hr>
<h4>Using a Pager</h4>
<pager total-items="totalItems" ng-model="currentPage"></pager>

<h4>Limiting the maximum visible buttons</h4>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
// inside the controller
$scope.totalItems = 64;
$scope.currentPage = 4;

$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;