Primeng paginator cannot reset page 1 after call API

问题

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

回答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

回答2:

Another useful method is changePage.

In template:

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

In the component:

@ViewChild('pp') paginator: Paginator;

this.paginator.changePage(0);

回答3:

For those using the dataTable primeng component and using its lazy pagination feature, we can reset the page to '1' by using

this.tableTemplateName.first = 0;

where setting first=0 means first page

来源：https://stackoverflow.com/questions/47555283/primeng-paginator-cannot-reset-page-1-after-call-api

标签

javascript

angular

primeng