我有一个使用primeReact的自定义数据表。我有一个全局搜索。
handleGlobalSearch = () => {
const { globalSearch } = this.state;
const { data } = this.props;
if (globalSearch) {
const filteredData = data.filter((row) =>
Object.values(row).some((value) =>
(value as any).toString().toLowerCase().includes(globalSearch.toLowerCase())
)
);
this.setState({
dataToDisplay: filteredData,
currentPage: 1,
});
} else {
this.setState({
dataToDisplay: data,
currentPage: 1,
});
}};
字符串
它只会搜索数据表记录。但我希望它是一个回调函数,这样它就可以搜索整个数据库记录的API,我调用获取表中的数据。该API的将不同的表,因为这个自定义数据表将与不同的API的和不同的数据使用。我如何才能实现这一点。有人可以帮助我与此!提前感谢!
2条答案
按热度按时间bqujaahr1#
@January要在回调模式下使用PrimeReact,它正在查看您的数据库,您需要使用“lazy”模式,如以下示例:https://primereact.org/datatable/#lazy_load
我有一个完整的工作演示,它在后端使用PostGresDB,并向您展示如何将其连接到REST服务,以使您的PrimeReact Datatable完全懒惰:https://github.com/melloware/quarkus-primereact
py49o6xq2#
要实现可以根据特定表从不同API检索数据的全局搜索,您可以创建一个回调函数,该函数将搜索查询作为参数并从相应的API获取数据。您可以将此回调函数作为prop传递给自定义数据表组件,并在全局搜索启动时使用它。
这里有一个实现这一目标的基本结构:
创建一个回调函数,用于根据搜索查询获取数据。此函数将根据每个表的API而有所不同。
将回调函数作为prop传递给自定义数据表组件。
在自定义数据表组件中,在启动全局搜索时调用回调函数,并将搜索查询作为参数传递。
使用从API获得的新数据更新表格。
下面是一个如何构造代码的示例:
字符串
在此示例中,DataTableContainer是定义回调函数fetchDataFromAPI的父组件,该函数基于搜索查询从API获取数据。然后将此函数作为prop传递给CustomDataTable组件。当启动全局搜索时,将调用回调函数,并使用新数据更新表。API调用的具体细节应根据您的用例进行调整。