Angular5 - PrimeNG - p-table 组件分页器选择的选项卡重置为数据重新加载时的第一个选项卡

Question

PrimeNG, p-table 组件重新加载数据时 table 重置为第一个分页器选项卡。

有什么方法可以阻止该行为并使分页器在重新加载数据时保持在同一选定选项卡中（例如 2 或 4 或 5 等）？

我每 10 秒重新加载一次数据，方法是在循环中使用 setTimeout() 调用 RestAPI，直到它停留在该页面上。

HTML

    <p-table #dt [columns]="cols" [value]="dataMarts" [paginator]="true" [rows]="15" [pageLinks]="5" [rowsPerPageOptions]="[5,10,15,20,50,100,200,500,1000]"sortField="Id" resetPageOnSort="false">

参考：https://www.primefaces.org/primeng/#/table

不确定此行为是否与上面 link.

的“更改检测”部分中给出的解释有关

更新：- 这个问题实际上是由 sortField="Id" 属性引起的，它总是显示第一个选项卡。去掉后就正常了

Answer 1

当您更改页面时触发 onPage 事件并且 first 属性，您可以留在您选择的页面上。

只需将 (onPage)="paginate($event)" [first]="first" 添加到您的 p-table 和相关的 TS 代码：

paginate(event) {
    this.first = event.first;
}

其中 event.first 是您所选页面的第一个可见行。

见StackBlitz

编辑

适用于 PrimeNG 5.2.4+

Angular5 - PrimeNG - p-table 组件分页器选择的选项卡重置为数据重新加载时的第一个选项卡

Angular5 - PrimeNG - p-table component paginator selected tab resets to first tab on data reload

html

primeng

angular

primeng-turbotable