Datatable stays on the current page after a search

[potjerodekool]

I have a page with an search component and a datatable. If I have 20 results and go to page 2 and do a search, the search component calls a search function but after the search is completed the datatable still show that I am on page 2. Is there a way to fix this so that the datatable show page 1 after a search?

search(searchQuery: string) { this.careProductsDataResource.query({index: 0, offset: 0, limit: 10}, function (item, i, items) { return !searchQuery || item.Description.indexOf(searchQuery) > -1; }) .then(data => { this.careProducts = data; }); }

[potjerodekool]

I found a solution by using the offset.

<data-table [items]="careProducts" [itemCount]="careProductsCount" (reload)="reloadCareProducs($event)" [offset]="careProductsOffset"> .... columns

In my reload function I get the offset from the DataTableParams and update the careProductsCount field. Then in my search function I set the careProductsCount field to 0.

[gayatribaghel]

Hey @potjerodekool , Can you please elaborate your answer with the required code changes.

[gayatribaghel]

Any answers please @potjerodekool @brunano21

[brunano21]

@gayatribaghel after you get the data back, just set datatable.offset = 0 to go back to page one.

[potjerodekool]

Hi @gayatribaghel

Here's a little demo project that demostrates how I did it. https://github.com/potjerodekool/angular-demo

In src/app/app.component.html I have the datatable where I bind the offset property. In src/app/app.component.ts in the reload function the offset property is updated. In the searchEmployees function I filter on the loaded data and call the reload function with a DataTableParams with offset 0.