获取当前页面并移动到 NgPrime 数据表中的特定页面

Question

我正在使用来自 primefaces 的数据表 - primeNg。我可以获取我所在的当前页面并以编程方式将数据表设置为特定页面吗？

我看到数据表在其中使用了分页组件，但是如何使用 @ViewChild 访问它？任何帮助将不胜感激。

Answer 1

<p-dataTable #dt [value]="items" [rows]="10" [paginator]="true" [(first)]="first"  (onPage)="paginate($event)">

变通方法 - 以编程方式将数据表设置为特定页面。

@ViewChild('dt') dataTable: DataTable;

setCurrentPage(n: number) {
    let paging = {
    first: ((n - 1) * this.dataTable.rows),
    rows: this.dataTable.rows
};
this.dataTable.paginate(paging);
}
// this.setCurrentpage(pageNumber) will set table to given page number

要获取您所在的当前页面，请使用 (onPage) 事件，如下所示

paginate(event) {
//event.first: Index of first record being displayed 
//event.rows: Number of rows to display in new page 
//event.page: Index of the new page 
//event.pageCount: Total number of pages 
let pageIndex = event.first/event.rows + 1 // Index of the new page if event.page not defined.
}

以下设置页码的方式似乎存在缺陷，因此您可能需要使用变通方法，直到缺陷关闭。根据primeng 文档要以编程方式将数据表设置为特定页面，请使用您想要查看的行号设置“first”。例如

this.first = 10 //will show second page, OR
this.first=20  //will show third page.