Primeng分页器无法在调用API后重设页面1 [英] Primeng paginator cannot reset page 1 after call API

问题描述

我有2个加载数据的功能:初始化页面和搜索页面. 进入页面时，数据显示为5页.我单击第3页，分页显示的数据就可以了.之后，输入数据搜索.数据表已重新加载，但页码未重置为1，仍为第3页. 在html中:

I have 2 functions to load data: when init page and search page. When init page, the data display with 5 pages. I click page 3, the data show with paging is Ok. After that, enter data search. The data table is reload, but the page number does not reset to 1, it's still page 3. in 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后重设分页器

Please adivice me how to reset the paginator after call another API

推荐答案

p-paginator组件包含changePageToFirst函数.要访问此功能，我们将需要获取对该组件的ViewChild引用.例如，在我们的模板中，我们定义了组件:

The p-paginator component contains the changePageToFirst function. To access this function, we will need to obtain a ViewChild reference to the component. For example, in our template we define the component:

<p-paginator rows="10" totalRecords="100" #p></p-paginator>
<button (click)="reset($event)">Reset</button>

在我们的组件中，我们可以按以下方式处理reset事件:

And in our component, we can handle the reset event as follows:

@ViewChild('p', {static: false}) paginator: Paginator;

reset($event) {
    this.paginator.changePageToFirst($event);
}

这是一个演示: https://plnkr.co/edit/FxwTHK0W2WuTCjuqhLp6?p=预览

上面的演示不再在plunkr上运行.这是更新的版本:

The above demo is no longer working on plunkr. Here is an updated version:

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

这篇关于Primeng分页器无法在调用API后重设页面1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！