PrimeNG Paginator set Page

user_9801648 0
Viewed 5586

I'm using the primeng paginator component inside an Angular 9 Project to page a huge list of profiles. If a user is on page 3, opens a profile and returns to search, the current page is 1, but it should be 3. I have saved the page inside a service, so the right data is shown, but the paginator is showing the wrong page. I could not find a way to set the current page of the paginator. Using the [first] attribute is not working.

primeng angular
2 Answers

You need to set the page manually. You can use Angular @ViewChild decorator to get access to PrimeNg Paginator component.

Give an id to that paginator in template:

<p-paginator #paginator ...></p-paginator>

And use it in component:

import { Paginator } from 'primeng/paginator';


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

private updateCurrentPage(currentPage: number): void {
  setTimeout(() => this.paginator.changePage(currentPage));
}
user_76255130

The first property is the best option to define the current page of the pager provided by the Primeng.

first = (page-1) * rows;

In template,

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

In component,

    pageSize = 10;  
    currentpage = 2;
    first;
    
     ngOnInit() {     
        this.first =  (this.currentpage-1)* this.pageSize;
     }

It will successfully set the active page without using setTimeout.

user_160585800
Related