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

时间:2018-06-06 15:24:35

标签: html angular primeng primeng-turbotable

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

enter image description here

有没有办法在重新加载数据时停止该行为并使分页器保留在相同的选定选项卡中(例如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

不确定此行为是否与上述链接的“更改检测”部分中的给定说明有关。

更新: - 此问题实际上是由属性 sortField =“Id”引起的,这导致始终显示第一个标签。删除后工作正常。

1 个答案:

答案 0 :(得分:1)

当您更改页面和onPage属性时触发first事件,您可以保留在所选页面上。

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

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

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

请参阅StackBlitz

修改

适用于PrimeNG 5.2.4 +