4

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?

kellermat
  • 2,859
  • 2
  • 4
  • 21

1 Answers1

1

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"
Caio Oliveira
  • 526
  • 4
  • 10
  • 1
    Thanks for your suggestion and sorry that I haven't given you feedback yet. Please give me one or two more days since currently I'm very busy with other things. Thanks for you understanding! – kellermat Jan 25 '23 at 15:13
  • In a minimal example your solution worked, yet strangely in my professional project I couldn't make it work yet. Anyway, it's up to me to figure out the cause for this, therefore I marked your answer as the "accepted answer". – kellermat Jan 27 '23 at 15:47
  • 1
    Update: I now found out why your trick didn't work in my other project: I thought it was enough to set `this.first` whenever I wanted to reset the selected page to 1. Yet it seems necessary to also update the `this.first`-variable when the user navigates to pages higher than 1. – kellermat Jan 27 '23 at 16:46