4

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.

Jay
  • 9,189
  • 12
  • 56
  • 96
  • 1
    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 Jun 06 '18 at 16:37
  • Great, many thanks mate, I would check. – Jay Jun 06 '18 at 16:44
  • 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 Jun 06 '18 at 16:47
  • I was going off of their Documentations which is 6.0.0 now – Chau Tran Jun 06 '18 at 16:58
  • 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 Jun 06 '18 at 17:01

1 Answers1

7

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+

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
  • Many thanks, any idea if it would work on 5.2.0? In my app 5.2.0 on event trigger it logs the event.first values correctly but on data reload, it again moves to first paginator tab. – Jay Jun 07 '18 at 10:30
  • It should only work from 5.2.4 according to that fixed [issue](https://github.com/primefaces/primeng/issues/5442) – Antikhippe Jun 07 '18 at 11:43
  • Thanks, it works. The actual problem was I also had another attribute sortField="Id". This was causing to always land in the first tab. I have now removed that. – Jay Jun 07 '18 at 14:52
  • Hi @Antikhippe, i am using similar logic to stay on page , but i am having an issue in displaying the last set of data, meaning if there are 107 records, and # of records per page is 10 then i am unable to display the last 7 rows of data.Paginator shows 11 but when i click 11 , it does not display the last set of data. – OptimusPrime Jan 29 '20 at 05:06
  • Hi @OptimusPrime, can you create a StackBlitz please ? Mine does not present the problem... – Antikhippe Jan 29 '20 at 13:34