如何在 PrimeReact 的 DataTable 中实现延迟加载

Question

我尝试实现DataTable的懒惰选项。在官方示例中，仅使用onPage事件。但是，如果我需要使用列筛选器、分页和排序怎么办？这是我需要开发的工作流程吗？

1. 客户端收集parameter list中的所有排序、筛选、分页
2. 客户端将parameter list发送到后端
3. 后端根据parameter list筛选数据
4. 后端将新数据发送到客户端
5. 客户端通过使用新更新的数据更新状态来更新数据表

如果这是工作流，那么我该怎么做，因为我没有看到任何从DataTable收集所有参数的全局事件。

我创建了一个测试用例，其中CarService类应该根据事件参数一起过滤数据。将此CarService视为后端。

应用程序

export class App extends Component<{}, State> {
carService = new CarService();
constructor(props) {
super(props);
this.state = {
cars: this.carService.getCars()
};
}
onSort = (event: any) => {
this.setState({ cars: this.carService.getFilteredCars(event) });
};
onPage = (event: any) => {
this.setState({ cars: this.carService.getFilteredCars(event) });
};
onFilter = (event: any) => {
this.setState({ cars: this.carService.getFilteredCars(event) });
};
render() {
return (
<div className="App">
<DataTable
value={this.state.cars}
paginator={true}
lazy={true}
rows={2}
rowsPerPageOptions={[2, 4]}
onSort={this.onSort}
onPage={this.onPage}
onFilter={this.onFilter}
>
<Column field="vin" header="Vin" filter sortable />
<Column field="year" header="Year" filter sortable />
</DataTable>
</div>
);
}
}

汽车服务

export class CarService {
cars = [
{ vin: "aaa", year: 1980 },
{ vin: "bbb", year: 1981 },
{ vin: "ccc", year: 1982 },
{ vin: "ccc", year: 1983 },
{ vin: "csdd", year: 1984 },
{ vin: "cgg", year: 1982 },
{ vin: "cyy", year: 1982 }
];
getCars() {
return this.cars;
}
getFilteredCars(filter: string) {
// filter the cars based on the filter
// an example filter could be: ?name=TestName&page=1
return this.cars;
}
}

Answer 1

[UPDATE] for PrimeReact version <3.x：

PrimeReact DataTable(设置在惰性模式下(具有onLazyLoad事件，在以下情况下调用该事件

• 当当前页码(或页面大小(发生更改时，
• 当任何定义的列筛选器(实际输入(发生更改时，
• 更改任何列的排序方向(启用排序(时。

可以声明具有onLazyLoad事件的数据表，例如，如下所示

<DataTable value={this.state.cars} paginator={true}  lazy={true}
rows={5} rowsPerPageOptions={[5, 10, 20]} 
totalRecords={this.state.totalRecords}
onLazyLoad={this.onLazyLoad} ... >

onLazyLoad函数可以是

onLazyLoad = (event) => {
console.log("On Lazy load event", event);
this.carservice.getLazyCars(event)...
}

其中event参数/对象具有以下属性

• 筛选器- 列筛选器的键值映射
• 首页- 页码
• multiSortMeta- 键值映射，如果同时为多个列启用了排序，
• 行- 每页的行数，
• 排序字段- 排序字段名称
• 排序顺序- 排序字段的排序顺序(1 升序，-1 降序(

您可以在此处找到更多详细信息(揭开了其他一些功能的神秘面纱(。

[更新] 对于 PrimeReact 版本> 3.x：

onLazyLoad事件将从库中删除。现在，上面提到的相关"惰性参数"可以通过数据表的state属性访问。

添加对数据表的引用

<DataTable ref={(el) => this.datatable = el} ... >

并在需要时从this.datatable.state对象中检索"惰性参数"(过滤器，sortField，sortOrder，first，multiSortMeta(。例如

onPage = (event) => {
console.log("Data table state", this.datatable.state)
//get filtered data using lazy params
//...
}