刷新数据和分页器状态

Question

我正在使用PrimeNG Turbotable <p-table #dt。

根据this dt.reset()将重置排序，过滤器和分页器状态。 我试图找到一种方法来重置分页器状态并重新加载表数据。 （无需重置排序状态）

这应该在该按钮的(click)上发生

<p-button icon="fa fa-refresh" (click)="refresh()"></p-button>

我该如何实现？

Answer 1

在.html文件中-

<p-table #dt [columns]="cols" [value]="result" [paginator]="true" [rows]="10" [(first)]="first">

别忘了[（第一）]

中的括号

在.ts文件中， 添加第一个属性：

first = 0

要重置的地方，请调用下面提到的刷新功能

refresh() {
    this.first = 0;
}

Answer 2

因为您的HTML看起来像

<p-table [columns]="cols" [value]="cars" [paginator]="true" [rows]="10" [first]="first">

其中 first 是要显示的第一行的索引，要仅重设分页，应将其值设置为0：

refresh() {
    this.first = 0;
}

然后，如果您还想重新加载数据，则只需在 refresh 方法中再次调用服务（如果需要）。

Answer 3

尝试一下：

refresh() {
    dt.first = 0;
}

Answer 4

在模板中，使用@ViewChild

获取对p表的引用

<p-table #turboTable [columns]="cols" [value]="cars" [paginator]="true" [rows]="10" >
<p-button icon="fa fa-refresh" (click)="refresh()"></p-button>

在组件文件中

    @ViewChild('turboTable', { static: false }) turboTable: any;

    refresh(){    
       this.turboTable._first = 0;
      //call your get service without filter
    }

Answer 5

我找到了解决方案，虽然很杂乱，但可以完成工作。使用@ViewChild访问您的html dom： @ViewChild('dt', { static: false }) dt: any;

我看到有一个名为sortOrder的属性。它具有两个值1和-1。我被迫通过添加以下内容重新加载排序：

this.dt.sortOrder = - this.dt.sortOrder; this.dt.sortOrder = - this.dt.sortOrder;