如何在具有延迟负载的priming涡轮表中使用过滤器? [英] How to use filter in primeng turbotable with lazy load?

问题描述

我正在使用带有延迟加载选项的PrimeNG TurboTable来显示数据库中的数据.这很完美.现在，我需要为发送到服务器的请求添加一些过滤器.该怎么做?

I'm using TurboTable of PrimeNG with lazy load option to display data from DB. This works perfect. Now, I need to add few filters to the request that is sending to the server. How to do that ?

这是有效的代码:

<p-table [columns]="cols" [value]="persons" [paginator]="true" [rows]="10" [lazy]="true" (onLazyLoad)="loadPersonsLazy($event)" 
            [totalRecords]="totalRecords" [loading]="loading">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>   
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

.ts组件代码:

import { Component, OnInit } from '@angular/core';

import{IPerson} from '../iperson'
import{PrimengServiceService} from '../primeng-service.service'
import {LazyLoadEvent} from 'primeng/api'; 
import {FilterMetadata} from 'primeng/api';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
})
export class PersonComponent implements OnInit {

  constructor(private _primengService: PrimengServiceService) { }

  persons:IPerson[] =[]; 
  cols: any[];
  totalRecords:number=100;
  loading: boolean;

  ngOnInit() {

    this.cols = [
      { field: 'FirstName', header: 'First Name' },
      { field: 'LastName', header: 'Last Name' },
      { field: 'EMail', header: 'EMail' },
      { field: 'Phone', header: 'Phone' }
  ];

  }


  loadPersonsLazy(event: LazyLoadEvent) {
    this.loading = true;
    this._primengService.getPersonList(event.first,event.rows).subscribe(res=>this.persons=res,
      error => {
        this.loading = false;
        console.log(`Error - getPersonList method: ${error}`);
      },
      () => {
        this.loading = false;
        console.log(`Info - getPersonList method succeeded. Results: ${JSON.stringify(this.persons)}`);
      })
  }

}

结果:

推荐答案

以下是一个示例:

模板

  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [style.width]="columnWidthTable(col.field)" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">
        <p-sortIcon *ngIf="col.sortable" [field]="col.field"></p-sortIcon>
        {{col.field | translate}}
        <input (click)="$event.stopPropagation()" [style.width]="'90%'" *ngIf="col.filterable" pInputText type="text" (keyup.enter)="columnFilter($event, col.field)">
      </th>
    </tr>
  </ng-template>

---

component.ts

  @ViewChild('dt') dataTable: Table;
  columnFilter(event: any, field) {
    this.dataTable.filter(event.target.value, field, 'contains');
  }

这篇关于如何在具有延迟负载的priming涡轮表中使用过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！