Wednesday, 2 September 2020

How to add filters to a lazy PrimeNG table

I'm building a lazy loaded table with PrimeNG, i followed PrimeNG documentation, and managed to call a backend JPA Query that returns a Page result, now i want to add filters to the table using the filters field in LazyLoadEvent :

HTML :

 <p-table #dt [value]="operations" [paginator]="true" [rows]="10" [totalRecords]="totalRecords"
    (onLazyLoad)="loadCarsLazy($event)"
    [lazy]="true"  >
    <!-- [loading]="loading" loadingIcon="pi pi-times"   -->
    <ng-template pTemplate="header">
      <tr>
        <th>Référence</th>
        <th>Status</th>
      </tr>      
    </ng-template>
    <ng-template pTemplate="body" let-oper>
      <tr>
        <td></td>
        <td>
          <span [class]="'statut-badge status-' + oper?.statutOperation?.designation"></span>
        </td>
      </tr>
    </ng-template>
  </p-table>

TS :

loadCarsLazy(event: LazyLoadEvent) {
    //in a real application, make a remote request to load data using state metadata from event
    //event.first = First row offset
    //event.rows = Number of rows per page
    //event.sortField = Field name to sort with
    //event.sortOrder = Sort order as number, 1 for asc and -1 for dec
    //filters: FilterMetadata object having field as key and filter value, filter matchMode as value

    this.operationService.getOperationsByPage(this.reference
    this.status.designation, 
    event.first/event.rows, 
    event.rows)
      .subscribe((res: any) => {
        if (res) {
          this.operations = res.content;
        }
      }, (err: OperationError) => {
      });
  }

Backend JPA query :

@Query("SELECT o FROM Operation o "
        + "where (:reference is null or o.reference like %:reference%) "
        + "and  (:status is null or o.statutOperation.designation = :status) ")
Page<Operation> findOperationsByPage(
        @Param("reference")   @Nullable String  reference,
        Pageable pageable );


from How to add filters to a lazy PrimeNG table

No comments:

Post a Comment