Primeng 分页器在调用 API 后无法重置第 1 页

2024-02-08

我有两个函数来加载数据:初始化页面和搜索页面时。 初始化页面时,数据显示为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(使用前将#替换为@)

Primeng 分页器在调用 API 后无法重置第 1 页 的相关文章

随机推荐