[SOLVED] PrimeNG: How to programmatically change the selected page in paginator?

PrimeNG: How to programmatically change the selected page in paginator?

I built a filtered datatable with a paginator, using PrimeNG 14 along with Angular 14.

I rely on server-side filtering, therefore every filter-change triggers an API-request that returns fresh table-data. Whenever a filter changes, the user is shown the matches of the first page and the paginator is supposed to jump back to "1". Since the latter doesn't seem to work out of the box, I tried to set the desired paginator state programmatically. Sadly, I wasn't successful.

Please have a look at my stackblitz example or at the following code:

My Component.ts:

@ViewChild('paginator', { static: true })
paginator?: Paginator;

ngAfterViewInit(): void {
  setTimeout(() => {
    this.paginator.changePage(3);
    console.log('Currently selected page:', this.paginator.getPage());
  });
}

The console output reads Currently selected page: 3, yet on the paginator 1 remains selected.

My Component.html:

<p-paginator
  #paginator
  [rows]="10"
  [totalRecords]="120"
  [rowsPerPageOptions]="[10, 20, 30]">
</p-paginator>

Have you got any suggestion on how to resolve this issue?

Solution

It seems to be a primeng issue, I would recommend you opening a issue on GH

Here is the workaround I did

public first = 0;
/*
...
*/
 private _changePage(page: number) {
    if(page < this.paginator.getPageCount())
      this.first = (page-1)*this.paginator.rows
  }


// add this to your paginator [first]="first"