PrimeNG set the page for the first using lazy loading table

Faqtt0 picture Faqtt0 · Oct 5, 2018 · Viewed 7.3k times · Source

I'm using component p-table with "Paginator" and "Lazy loading", and I made one search component with what I need.
I am trying to fix the problem when I filter and the page index is on another page.
example:
page index = 2
Filtering text = texto.

Then, I update the records on table and the quantity of pages. But the page index continues with 2, if the result has more or equal quantity of index pages.

I've try changing the value from Event but it does not apply.

Documentation PrimeNG lazy loading:

loadData(event: LazyLoadEvent) {
  //event.first = First row offset
  //event.rows = Number of rows per page
  //event.sortField = Field name to sort in single sort mode
  //event.sortOrder = Sort order as number, 1 for asc and -1 for dec in single sort mode
  //multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties.
  //filters: Filters object having field as key and filter value, filter matchMode as value
  //globalFilter: Value of the global filter if available
  this.cars = //do a request to a remote datasource using a service and return the cars that match the lazy load criteria
}

Answer

DirtyMind picture DirtyMind · Oct 6, 2018

I am assuming you have created your search component where you will search and that will reflect in the turbo table. You are not using Global filter of Turbotable. In this case you have to reset the table first and then fetch the record.

Suppose below is your table:

<p-table #tt [value]="testdata" class="test-data" [lazy]="true"
         (onLazyLoad)="loadDataLazily($event)"
            [paginator]="true" [rows]="3" [totalRecords]="totalRecords">

Use selector for your table like #tt Now in you component.ts file

reset your table in your filter method;

import { Table } from '../../../../node_modules/primeng/components/table/table';
    export class TableComponent{
     @ViewChild('tt') tt: Table;
     filter(){
      this.tt.reset();
     }
}