angular - 刷新数据和分页器状态

Question

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

根据这 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">

不要忘记 [(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;
}

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

Answer 3

在您的模板中使用 @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 4

尝试这个：

refresh() {
    dt.first = 0;
}

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;