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

use*_*357 5 typescript angular primeng-datatable

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

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

gio*_*gio 9

好吧,您不能直接获取页码,但是您可以获取第一个显示行的偏移量(从零开始),然后知道每页显示的项目数计算页码。

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

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

模板:

<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>
Run Code Online (Sandbox Code Playgroud)

代码:

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;
    }
}
Run Code Online (Sandbox Code Playgroud)

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

  • 它对你有用吗?因为在我的页面上首先是无能为力! (2认同)