web-dev-qa-db-fra.com

Comment utiliser le filtre dans Primeng turbotable avec charge paresseuse?

J'utilise TurboTable of PrimeNG avec l'option de chargement différé pour afficher les données de la base de données. Cela fonctionne parfaitement. Maintenant, je dois ajouter quelques filtres à la demande envoyée au serveur. Comment faire ça ?

Voici le code qui fonctionne:

<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>

Composant .ts code:

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)}`);
      })
  }

}

Résultat :  enter image description here

angularprimeng-turbotable
3
David

Voici un exemple:

template

  <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');
  }
1
sabithpocker

J'ai trouvé la réponse avec PrimeNG fonctionnalités paresseuses et la source de ce blog .

1
David