Question

在数据表中使用PrimeNG的默认过滤器进行过滤后，如何获得行数。

[totalRecords]="totalRecords"始终显示最初获取的记录数。

即使经过过滤，totalRecords的值仍保持不变，并且在过滤后不会改变。

示例：最初的totalRecords是50，过滤后，它在数据表中显示的记录数是15。但是我无法得到值15，而是得到50。

有什么办法吗？

Answer 1

假设您对数据表组件有引用，只需询问其totalRecords属性：

<p-dataTable [value]="cars" [rows]="10" [paginator]="true" [globalFilter]="gb" #dt>
    ...
</p-dataTable>

{{ dt.totalRecords }} records

Demo

Answer 2

以上答案是正确的，我要加一点。

如果要将totalRecords值绑定到打字稿.ts文件，请使用(onFilter)事件并触发参数为$event和{{1 }}

就我而言，我已经给出

dt.totalRecords

简而言之，

<p-table #dt [value]="personListData" [columns]="columns" (onPage)="onPageChange($event)" [resizableColumns]="true" [paginator]="true" [rows]="rowsCount" selectionMode="multiple" [(selection)]="selected_data" [loading]="loading" [totalRecords]="totalRecords" class="table table-hover table-responsive table-bordered" [responsive]="true" (onFilter)="handleFilter($event,dt.totalRecords)">

.ts文件中的功能，

(onFilter)="handleFilter($event,dt.totalRecords)"

注意：如果要使用过滤的记录计数值，则您可以将其分配给任何变量并在打字稿中的任何地方使用文件。

Answer 3

我在Angular 8上，我的桌子没有分页。 dt.totalRecords始终是全部金额。因此，如果我有20行，并且在屏幕上将其过滤为2，则dt.totalRecords仍为20。

我最终要做的是使用onFilter，传入整个dt，然后使用dt.filteredValue：

onFilter(event: any, table: any): void {
    if(!!table.filteredValue) {
        this.visibleRows$.next(table.filteredValue.length);
    }
}

您必须检查是否为空，因为如果您更改过滤器但不过滤掉任何其他行，则filteredValue为空。

Answer 4

html：

<p-dataTable #dt (onFilter)="handleFilter()" [value]="cars" [rows]="10" [paginator]="true" >
    ...
</p-dataTable>

{{ dt.totalRecords }} records

ts：

@ViewChild('dt', { static: true }) dt: Table;

handleFilter() {
    if (this.dt.filteredValue != null)
      this.dt.totalRecords = this.dt.filteredValue.length;
    else
      this.dt.totalRecords = this.cars.length;
  }

在PrimeNG中过滤数据表

4 个答案: