javascript - Angular 分页控制显示的页码

Question

我正在使用 Angular 分页，如果页面太多，那么它会像谷歌逻辑一样显示分页。

这是相同的屏幕截图

我想限制分页的宽度，所以我需要删除一些额外的数字来显示，所以有什么方法可以删除一些页面，例如在开始时显示 7 页，我可以将其限制为 3 页吗？

这是我的完整代码

分页 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>

打印行

<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>

Answer 1

你可以使用 . 最大尺寸 (可选，默认 = 9)指定要显示的分页链接的最大数量。默认为 9，最小值为 5(设置低于 5 的值不会产生效果)。

所以你的分页 html 将是

<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>

添加 max-size="5"后分页将如下所示

希望这对您有帮助。