在 PrimeNG 中过滤数据 Table

Question

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

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

即使过滤后，totalRecords 值保持不变，过滤后不会改变。

示例：最初 totalRecords 是 50，过滤后，no.of 记录它在数据中显示 table 是 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 和 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)">

简而言之，

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

.ts 文件中的函数，

handleFilter(e,filteredRecordCount){
   console.log("filteredRecordCount");
}

NOTE: If you want to use the filtered records count value, then you can assign it to any variable and use anywhere in your typescript file.

Answer 3

我在 Angular 8，我的 table 没有分页。 dt.totalRecords 始终是全额。因此，如果我有 20 行，我将其筛选为 2 on-screen，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 中过滤数据 Table

Filtering Data Table in PrimeNG

angular5

primeng

primeng-datatable