如何获取和设置primeNG数据表中的当前页码？答案

【问题标题】：how to get and set the current page number in primeNG datatable?如何获取和设置primeNG数据表中的当前页码？
【发布时间】：2017-08-24 08:28:32
【问题描述】：

我在我的 Angular 项目中使用 primeNG 数据表。在我的一个场景中，我需要获取 primeNG 数据表的当前页码并将该页码传递到下一个屏幕，当用户导航回上一个屏幕时，我想再次设置该页码。

我检查了 primeNG 数据表，但没有明确的方法来获取和设置当前页码。

【问题讨论】：

标签： angular typescript primeng-datatable

【解决方案1】：

嗯，你不能直接得到页码，但你可以得到第一个显示行的偏移量（从零开始），然后知道每页显示的项目数计算页码。

来自文档：
“...Paginator 也可以通过模型使用绑定到第一个属性的绑定来控制，其中更改触发分页。可选地，此属性支持双向绑定，以便模型值也可以在分页时更新。这是一个重置的示例外部的分页器。",

"...first - 要显示的第一行的零相对编号。", (https://www.primefaces.org/primeng/#/datatable, https://www.primefaces.org/primeng/#/paginator)

模板：

<p-dataTable [value]="cars" [rows]="10" [paginator]="true" [(first)]="first">
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

<button type="button" (click)="reset()" label="Reset"></button>

代码：

export class DataTableDemo implements OnInit {

    cars: Car[];

    first: number = 0;

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    }

    reset() {
        this.first = 0;
    }
}

如文档所述，通过将 [(first)] 绑定到组件中的变量，您还可以在分页状态更改时更新变量，因此您可以像这样计算页码 pageNumber = offset/itemsPerPage

【讨论】：

它对你有用吗？因为在我的页面上首先无法做任何事情！
计算最后一页的第一行数是一场噩梦，因为页面大小（itemsPerPage）也是一个变量，因为[rowsPerPageOptions]="[10, 50, 100]"
@SackySan 您是否有更好的解决方案，使用 3 年前提出这个问题时存在的 api-s？如果是，为什么不发布作为答案

【解决方案2】：

使用<p-paginator> 这个标签有一个叫做 onPageChange() 的函数。您可以在此函数中获取页码

【讨论】：

【解决方案3】：

使用 [lazy]="true" (onLazyLoad)="loadCustomers($event)

{第一}

将第一个除以您在代码中显示的项目数，您将获得页码

【讨论】：