在 Antd Table React 中单独处理分页排序和过滤

Question

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

为了单独处理分页，我使用了 Pagination 的 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。

Answer 1

要在后端管理过滤器、排序和分页，您需要管理表的状态handleChange：

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

handleTableChange = (pagination, filters, sorter) => {

    this.getData(
        (pagination.current * pagination.pageSize) - pagination.pageSize,
        pagination.pageSize,
        {
            order: sorter.hasOwnProperty('column') ? sorter : false
        }
    )

}

从 API 获取数据：

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

    fetch(apiURL + '/you/endpoint/?offset=' + offset + '&limit=' + limit + ( params && params.order ? '&order=' + JSON.stringify(params.order) : '' ), {
            method: 'GET' // || POST
        }).then((r) => {

            // parse response
            const contentType = r.headers.get("content-type");
            if (contentType && contentType.indexOf("application/json") !== -1) {

                return r.json().then(data => ({status: r.status, body: data}));

            } else {

                return r.text().then(text => ({status: r.status, body: text}));

            }

        }).then((res) => {

            // get result 
            console.log('Result: ',res.body)

        }).catch((err) =>  {

            // handle error
            console.log(err)

        });
}

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