typescript 如何在primeNG数据表中获取和设置当前页码?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/45856623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get and set the current page number in primeNG datatable?
提问by user3340357
I am using primeNG datatable in my angular project. In one of my scenario I need to get the current page number of primeNG data table and pass that number to the next screen and when user navigate back to previous screen I want to set that page number again.
我在我的 angular 项目中使用了 primeNG 数据表。在我的一个场景中,我需要获取 primeNG 数据表的当前页码并将该编号传递到下一个屏幕,当用户导航回上一个屏幕时,我想再次设置该页码。
I checked the primeNG datatable but there is no clear way to get and set the current page number.
我检查了 primeNG 数据表,但没有明确的方法来获取和设置当前页码。
回答by gio
Well you can't get page number directly, but you can get offset (zero based) of first displayed row and then knowing number of items displayed per page calculate page number.
好吧,您不能直接获取页码,但是您可以获取第一个显示行的偏移量(从零开始),然后知道每页显示的项目数计算页码。
From documentation:
"...Paginator can also be controlled via model using a binding to the first property where changes trigger a pagination. Optionaly this property supports two-way binding so that model value can be updated on pagination as well. Here is an example to reset the paginator externally.",
来自文档:
“...分页器也可以通过模型使用绑定到第一个属性进行控制,其中更改触发分页。可选地,此属性支持双向绑定,以便模型值也可以在分页时更新。这是一个外部重置分页器的示例。",
"...first - Zero-relative number of the first row to be displayed. ", (https://www.primefaces.org/primeng/#/datatable, https://www.primefaces.org/primeng/#/paginator)
"...first - 要显示的第一行的零相对数。", ( https://www.primefaces.org/primeng/#/datatable, https://www.primefaces.org/primeng/# /分页器)
template:
模板:
<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>
code:
代码:
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;
}
}
As documentation states, by binding [(first)]
to variable in your component you also get your variable updated when pagination state changes, so you can calculate page number like this pageNumber = offset/itemsPerPage
正如文档所述,通过绑定[(first)]
到组件中的变量,您还可以在分页状态更改时更新变量,因此您可以像这样计算页码pageNumber = offset/itemsPerPage
回答by C.Rookie
use <p-paginator>
this label has a function called onPageChange() . you can get page number in this function
使用<p-paginator>
这个标签有一个名为 onPageChange() 的函数。您可以在此功能中获取页码