javascript - Angular pagination control page number to show - Stack Overflow

admin管理员组

文章数量:1426928

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

Share Improve this question Follow asked Oct 6, 2016 at 7:13 Gaurav AggarwalGaurav Aggarwal 10.2k88 gold badges4141 silver badges7676 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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.

本文标签： javascriptAngular pagination control page number to showStack Overflow