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