Question

我有两个加载数据的功能：当初始页面和搜索页面时。当init页面时，数据显示有5页。我点击第3页，分页的数据显示确定。之后，输入数据搜索。数据表是重新加载的，但页码不会重置为1，它仍然是第3页。在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);
    }
}

请告诉我如何在调用其他API后重置分页器

Answer 1

p-paginator组件包含changePageToFirst函数。要访问此函数，我们需要获取对该组件的ViewChild引用。例如，在我们的模板中，我们定义组件：

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

在我们的组件中，我们可以按如下方式处理重置事件：

@ViewChild('p') paginator: Paginator;

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

以下是演示：https://plnkr.co/edit/FxwTHK0W2WuTCjuqhLp6?p=preview

编辑：以上演示不再适用于plunkr。这是一个更新版本：

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

Answer 2

另一种有用的方法是 changePage 。

在模板中：

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

在组件中：

@ViewChild('pp') paginator: Paginator;

this.paginator.changePage(0);

Answer 3

对于使用dataTable primeng组件并使用其惰性分页功能的用户，我们可以使用

将页面重置为“ 1”

this.tableTemplateName.first = 0;

其中设置first=0表示首页

Primeng paginator在调用API后无法重置第1页

3 个答案: