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

3
votes

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.

1
htmlangularprimengprimeng-turbotable
There's a [page] input on p-table where you can bind the current Page for the paginator. I'm sure you can come up with some logic to get the current Page from the paginator then rebind it – Chau Tran
Great, many thanks mate, I would check. – Jay
No, it does not work :-(. I get this error "Error: Template parse errors: Can't bind to 'page' since it isn't a known property of 'p-table'." I use version 5.2.0. Any idea which version are you talking about? – Jay
I was going off of their Documentations which is 6.0.0 now – Chau Tran
NVM it was a wrong assumption. The page actually available in the state of a paginator template. first on the p-table is the index of the first row to be displayed. Is there a way for you to figure out what's the index of the first row on a current Page? – Chau Tran

1 Answers

4
votes

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+