如何将服务器端分页与客户端过滤一起使用？

Question

我需要的是当我使用远程数据时我希望被允许过滤客户端而不是服务器端这是我的 table

和我的 remote data

代码

 <MaterialTable
   title={Strings.userManagementList}
   data={query => {
     this.get(query);
     return new Promise(resolve => event.on('data-fetched', resolve));
    }}
    isLoading={store.loading}
    options={this.options}
    actions={this.actions}
    localization={this.localization}
    columns={this.columns}
    components={this.components}
  />

这很好用，但左上角的搜索栏也很好 when i type in it, it calls the end point agin with search parameter ---> 这很正常，但我的问题是 when i change filter or search from search bar ---> related to any column it also calls the endpoint

所以我想要的是： 1/远程数据 2/再次触发远程数据时仅使用左上搜索字段 3/ 如果我从列过滤栏中过滤，它会在当前 table 结果中搜索不需要远程数据，除非我从左上角的搜索字段进行分页或搜索

提前致谢。

Answer 1

您可以通过在您的组件中本地保存 return 通过查询编辑的数据来实现。

现在，如果只是查询的过滤器发生变化而不是页面或搜索参数发生变化，则无需调用 this.get(query);，而是访问本地保存的数据，通过查询对象中的过滤器文本对其进行过滤return 承诺中的过滤数据，而不是获取新数据。

如何将服务器端分页与客户端过滤一起使用？

How to use server side pagination with client filtration?

material-table