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

分享于2023年05月08日 angular primeng-datatable typescript 问答
【问题标题】:how to get and set the current page number in primeNG datatable?如何获取和设置primeNG数据表中的当前页码?
【发布时间】:2023-05-07 05:36:01
【问题描述】:

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

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


【解决方案1】:

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

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

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

模板:


    
    
    
    



代码:

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?如果是,为什么不发布作为答案