I am using angular pagination in which if the page are too much then its showing pagination like google logic.

Here is the screenshot for the same

I want to restric the width of the pagination so i need to remove some extra numbers to show so is there any way to remove some pages like its showing 7 pages in start can i restrict it to 3 pages.

This is my plete code

Pagination HTML

<div class="paginationCont">
    <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="templates/pagination_ctrls.html"></dir-pagination-controls>
</div>

Printing rows

<tr ng-hide="transStatus=='inactive'" dir-paginate="item in transactions | filter: transSearch | itemsPerPage: pageSize" current-page="currentPage">
    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> {{item.txn_id}}</label></div></td>
     <td>{{item.name}}</td>
     <td>{{item.datetime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
    <td>{{item.amount}}</td>
    <td>{{item.client_cut}}</td>
    <td ng-switch="item.status"><span ng-switch-when="1">Active</span><span ng-switch-when="0">Inactive</span></td>
</tr>

I am using angular pagination in which if the page are too much then its showing pagination like google logic.

Here is the screenshot for the same

I want to restric the width of the pagination so i need to remove some extra numbers to show so is there any way to remove some pages like its showing 7 pages in start can i restrict it to 3 pages.

This is my plete code

Pagination HTML

<div class="paginationCont">
    <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="templates/pagination_ctrls.html"></dir-pagination-controls>
</div>

Printing rows

<tr ng-hide="transStatus=='inactive'" dir-paginate="item in transactions | filter: transSearch | itemsPerPage: pageSize" current-page="currentPage">
    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> {{item.txn_id}}</label></div></td>
     <td>{{item.name}}</td>
     <td>{{item.datetime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
    <td>{{item.amount}}</td>
    <td>{{item.client_cut}}</td>
    <td ng-switch="item.status"><span ng-switch-when="1">Active</span><span ng-switch-when="0">Inactive</span></td>
</tr>

• javascript
• angularjs
• pagination

1 Answer 1

you can use . max-size (optional, default = 9) Specify a maximum number of pagination links to display. The default is 9, and the minimum is 5 (setting a lower value than 5 will not have an effect).

so your pagination html will be

<div class="paginationCont">
    <dir-pagination-controls max-size="5" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="templates/pagination_ctrls.html"></dir-pagination-controls>
</div>

after adding max-size="5" pagination will look like this

Hope this will help you.