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

时间:2017-08-24 08:28:33

标签: angular typescript primeng-datatable

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

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

3 个答案:

答案 0 :(得分:4)

您无法直接获取页码,但您可以获得第一个显示行的偏移量(基于零),然后知道每页显示的项目数量计算页码。

来自文件:
" ... Paginator也可以通过模型控制,使用绑定到第一个属性,其中更改触发分页。 Optionaly此属性支持双向绑定,因此模型值也可以在分页上更新。以下是从外部重置分页器的示例。",

" ... first - 要显示的第一行的零相对数。 ",(https://www.primefaces.org/primeng/#/datatablehttps://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一样计算页码

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

{第一个}

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