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

Question

我有 2 个函数来加载数据:初始化页面和搜索页面时。
初始化页面时，数据以5页显示。我点击第3页，分页显示的数据是好的。之后，进入数据搜索。重新加载数据表，但页码没有重置为 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 后重置分页器

Answer 1

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

编辑:上面的演示不再适用于 plunkr。这是一个更新的版本:

https://stackblitz.com/edit/angular-u9nqf5