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

Question

我有2个函数来加载数据:当初始页面和搜索页面.当init页面时,数据显示有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后重置paginator

Answer 1

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

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

在我们的组件中,我们可以按如下方式处理重置事件:

@ViewChild('p') paginator: Paginator;

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

这是一个演示:https://plnkr.co/edit/FxwTHK0W2WuTCjuqhLp6？p = preview

Answer 2

另一个有用的方法是changePage。

在模板中：

<p-paginator #pp></p-paginator>

在组件中：

@ViewChild('pp') paginator: Paginator;

this.paginator.changePage(0);

Answer 3

对于那些使用 dataTable primeng 组件并使用其延迟分页功能的人，我们可以使用以下命令将页面重置为“1”

this.tableTemplateName.first = 0;

其中设置first=0表示首页