要显示的角度分页控制页码

时间:2016-10-06 07:13:54

标签: javascript angularjs pagination

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

以下是相同

的屏幕截图

enter image description here

我想限制分页的宽度,所以我需要删除一些额外的数字来显示所以是否有任何方法可以删除一些页面,例如它在开始时显示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>

1 个答案:

答案 0 :(得分:2)

你可以用。的最大尺寸 (可选,默认= 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”后,分页将如下所示 enter image description here

希望这会对你有所帮助。