Antd Table React中分别处理分页排序和过滤答案

【问题标题】：Handle Pagination Sorting and Filtering Separately in Antd Table ReactAntd Table React中分别处理分页排序和过滤
【发布时间】：2020-02-03 13:22:29
【问题描述】：

我想在我的 antd 表中分别处理服务器端排序、过滤和分页。因此，无论何时更改分页，都不应调用排序和过滤功能。对于排序和过滤也是如此。在 Table 的 antd 文档中，他们使用了 onChange 属性，每当排序、过滤或分页发生更改时都会调用该属性。 https://ant.design/components/table/#components-table-demo-ajax

为了单独处理分页，我使用了分页的 onChange 道具。但是这里，当分页改变时，它调用排序和过滤函数，当排序和过滤改变时，它调用分页函数。

我不确定如何实现此功能。谁能帮我解决这个问题。

表格的antd代码示例

const handlePagination = page => {
    //This should be called only when pagination changes
    dispatch(PaginateData(page));
};

const handleSortFilter= params=> {
    //This should be called only when pagination or sorting is called.
    dispatch(SortFilterData(params));
};

<Table
    rowSelection={rowSelection}
    onChange={handleSortFilter}
    rowKey={record => record.id}
    columns={columns}
    dataSource={data}
    loading={tableActionInProgress}
    pagination={{
        onChange: handlePagination,
        pageSize: dataPerPage,
        total: CountData
    }}
/>

更新在 ajax 请求的 antd 表文档 (https://ant.design/components/table/#components-table-demo-ajax) 中，我可以看到，每当我们更改排序或过滤时，它会将页面更改回 1。我需要在代码中更改什么，以便每当更改过滤或排序时它不应该将页面参数设置为 1。

为什么我需要执行此操作是因为当用户更改过滤器或在特定页面中排序时，如果我进入用户尝试过滤的页面（页码）或排序，以便我可以发送请求中的页码并根据后端页面进行过滤/排序并将响应发回。如果对antd表进行排序或过滤，是否有任何选项不将页面设置回1。

【问题讨论】：

请尝试制作一个可生产的示例以便我们对其进行编辑，您可以使用沙箱：codesandbox.io/s/react-antd-styled-template-n8n96，您可以参考How to create a Minimal, Reproducible Example
@DennisVash 感谢您的回复，我已经添加了 antd 文档 (ant.design/components/table/#components-table-demo-ajax) 中的示例代码。你可以在这里找到代码框codesandbox.io/s/pensive-khorana-qkpwp
@DennisVash 所以基本上我的问题是每当对 antd 表应用排序或过滤时，页面设置为 1。它是 antd 的默认行为吗？我们能否以这样的方式自定义它，即使我在特定页面上并应用排序/过滤，它也不应该将页面设置回 1，而是应该使用我们所在的页码发送请求并进行过滤/排序参数。
我知道了，这不是默认行为，在您共享的代码框中，在数据正在更改的每种排序中，当数据更改时您希望发生什么?要保持在同一页面上，您不知道第一页发生了什么？这不是可取的行为。
Table只有在失去状态时才会“重置”到第 1 页。在没有看到任何代码或可生产示例的情况下，我无法猜测您如何实现排序以及如何处理获取时的呈现。您有足够的免费资源来制作一个模拟提取示例并分享它以使您的问题成为一个完整的问题。

标签： reactjs react-hooks antd

【解决方案1】：

要在后端管理过滤器、排序和分页，您需要使用表onChange 的api parameter：

<Table
    columns={[
      //...
    ]}
    rowKey="key"
    dataSource={youSource}
    onChange={handleChange}
    pagination={{
       total: totalCount // total count returned from backend
    }}
/>

我们的handleChange：

const handleChange = (pagination, filters, sorter) => {
  const offset = pagination.current * pagination.pageSize - pagination.pageSize;
  const limit = pagination.pageSize;
  const params = {};

  if (sorter.hasOwnProperty("column")) {
    params.order = { field: sorter.field, dir: sorter.order };
  }

  getData(offset, limit, params);
};

从 API 获取数据：

const getData = (offset, limit, params = false) => {

  const queryParams = new URLSearchParams();

  queryParams.append("offset", offset);
  queryParams.append("limit", limit);
  queryParams.append("offset", offset);

  if(params && params.order) {
    queryParams.append("order", JSON.stringify(params.order));
  }

  // In this example I use axios to fetch
  axios
    .get(`https://example.com/you/endpoint/?${queryParams.toString()}`)
    .then((response) => {
      // get response
      console.log("Response: ", response);
    })
    .catch((err) => {
      // Handle error
      console.log(err);
    });
};

您已经决定如何获取数据，或者如果您有可能实现后端逻辑，则使用 GET 中的参数实现查询。

【讨论】：