我有两个函数来加载数据:初始化页面和搜索页面时。
初始化页面时,数据显示为5页。我点击第3页,数据分页显示就OK了。之后,进入数据搜索。数据表重新加载,但页码没有重置为1,仍然是第3页。
在 HTML 中:
<p-paginator rows="5" totalRecords="{{totalRecords}}" (onLazyLoad)="paginate($event)"
(onPageChange)="paginate($event)" [rowsPerPageOptions]="[2,5,10,20]"></p-paginator>
ts:
defaultPage:0;
defaultSize:2
paginate(event) {
let currentPage: number;
this.defaultPage = event.first / event.rows;
this.defaultSize = event.rows;
this.listData = [];
if (this.isSearch == 1) {
this.getLoadPageSearch(this.defaultSize, this.defaultPage);
} else {
this.getLoadPage(this.defaultSize, this.defaultPage);
}
}
请告诉我如何在调用另一个API后重置分页
p-paginator 组件包含changePageToFirst
功能。要访问此函数,我们需要获取对该组件的 ViewChild 引用。例如,在我们的模板中我们定义了组件:
<p-paginator rows="10" totalRecords="100" #p></p-paginator>
<button (click)="reset($event)">Reset</button>
在我们的组件中,我们可以按如下方式处理重置事件:
@ViewChild('p', {static: false}) paginator: Paginator;
reset($event) {
this.paginator.changePageToFirst($event);
}
这是一个演示:https://plnkr.co/edit/FxwTHK0W2WuTCjuqhLp6?p=preview https://plnkr.co/edit/FxwTHK0W2WuTCjuqhLp6?p=preview
编辑:上面的演示不再适用于 plunkr。这是更新版本:
https://stackblitz.com/edit/angular-u9nqf5 https://stackblitz.com/edit/angular-u9nqf5
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)