Primeng paginator cannot reset page 1 after call API

Question

I have 2 functions to load data: when init page and search page. When init page, the data display with 5 pages. I click page 3, the data show with paging is Ok. After that, enter data search. The data table is reload, but the page number does not reset to 1, it's still page 3. in html:

<p-paginator rows="5" totalRecords="{{totalRecords}}"  (onLazyLoad)="paginate($event)"
 (onPageChange)="paginate($event)" [rowsPerPageOptions]="[2,5,10,20]"></p-paginator>

ts:

 defaultPage:0;
 defaultSize:2
paginate(event) {
 let currentPage: number;
    this.defaultPage = event.first / event.rows;
    this.defaultSize = event.rows;
    this.listData = [];
    if (this.isSearch == 1) {
      this.getLoadPageSearch(this.defaultSize, this.defaultPage);
    } else {
      this.getLoadPage(this.defaultSize, this.defaultPage);
    }
}

Please adivice me how to reset the paginator after call another API

Answer 1

The p-paginator component contains the changePageToFirst function. To access this function, we will need to obtain a ViewChild reference to the component. For example, in our template we define the component:

<p-paginator rows="10" totalRecords="100" #p></p-paginator>
<button (click)="reset($event)">Reset</button>

And in our component, we can handle the reset event as follows:

@ViewChild('p', {static: false}) paginator: Paginator;

reset($event) {
    this.paginator.changePageToFirst($event);
}

Here is a demo: https://plnkr.co/edit/FxwTHK0W2WuTCjuqhLp6?p=preview

EDIT: The above demo is no longer working on plunkr. Here is an updated version:

https://stackblitz.com/edit/angular-u9nqf5

Answer 2

Another useful method is changePage.

In template:

<p-paginator #pp></p-paginator>

In the component:

@ViewChild('pp') paginator: Paginator;

this.paginator.changePage(0);