Angular5 - PrimeNG - p-table component paginator selected tab resets to first tab on data reload

Jay picture Jay · Jun 6, 2018 · Viewed 9k times · Source

PrimeNG, p-table component when the data is reloaded the table resets to the first paginator tab.

enter image description here

Is there any way to stop that behaviour and make the paginator to remain in the same selected tab (for example 2 or 4 or 5 etc) when the data is reloaded?

I reload the data every 10 seconds by calling the RestAPI using setTimeout() in a loop till it stays on that page.

HTML

    <p-table #dt [columns]="cols" [value]="dataMarts" [paginator]="true" [rows]="15" [pageLinks]="5" [rowsPerPageOptions]="[5,10,15,20,50,100,200,500,1000]"sortField="Id" resetPageOnSort="false">

Reference: https://www.primefaces.org/primeng/#/table

Not sure if this behaviour is something to do with the given explanation in section "Change Detection" of the above link.

Update:- This problem was actually caused by the attribute sortField="Id" which caused to always show the first tab. After removing it works fine.

Answer

Antikhippe picture Antikhippe · Jun 6, 2018

With onPage event triggered when you change page and first property, you can stay on the page you selected.

Just add (onPage)="paginate($event)" [first]="first" to your p-table and relevant TS code :

paginate(event) {
    this.first = event.first;
}

where event.first is the first visible row of the page you selected.

See StackBlitz

Edit

Works with PrimeNG 5.2.4+