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

Question

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

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

Answer 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计算页码

Answer 2

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

Answer 3

使用lazy="true“(onLazyLoad)="loadCustomers($event)”

{第一个}

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