DataTable - Lazy

[haziq]

So i implemented Lazy on my datatable. However, it resulted in the other functions (editable, sortable and global filter) to be disabled. Is there any way for it to work?

[sleeper9]

How do you mean "disabled"? We have lazy initialize and sorting-filtering work together well.

[haziq]

The sortable and global filter doesnt seem to work when i add in the LazyLoadEvent

[cagatay.civici]

You need to do the filtering and sorting yourself in lazy mode by connecting to a remote url. In lazy mode, datatable just passes you the state and expect the new data.

[sleeper9]

We do it something like this:

Code: Select all

<p-dataTable [value]="items" [rows]="rowsPerPage" [paginator]="true" [pageLinks]="9" resizableColumns="true" selectionMode="multiple" [(selection)]="selectedItems" [lazy]="true" [totalRecords]="totalItems" (onLazyLoad)="loadItems($event)" (onFilter)="getCount($event)" class="datalist">

...where loadItems() and getCount() do server-side queries for the items and the count of items (for pagination).

[haziq]

I'm quite new to Angular. Do you mind to share some examples on how should I do it?

[haziq]

Okay so after try and errors i finally get it to work. However, the only thing that I'm still unsure of is the filtering part. Much help is appreciated!

[sleeper9]

You shall specify an event callback to the onFilter like this:

Code: Select all

(onFilter)="getCount($event)"

The $event object holds the following data (extracted from DataTable showcase page):

onFilter - event.filters: Filters object having a field as the property key and an object with value, matchMode as the property value.
Callback to invoke when data is filtered.

Here, the getCount() fires an HTTP request to a remote server that returns the number of items that match the filtering criteria, so you can rebuild your datatable with the appropriate number of pages. The returned (integer) value should be stored in a variable, e.g. this.totalItems, and you should set this to the datatable like:

Code: Select all

[totalRecords]="totalItems"

After that, whenever the totalItems var changes, the dataTable will rerender itself.

Hope this helps you

[haziq]

Everything works perfectly now! Thanks so much!