Reactjs 在Antd表中分别处理分页排序和筛选

我想在我的antd表中分别处理服务器端排序、筛选和分页。因此，无论何时更改分页，都不应调用排序和筛选函数。对于排序和筛选，情况类似。在表的antd文档中，他们使用了onChange prop，每当排序、筛选或分页发生变化时，都会调用onChange prop

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

const handlePagination=page=>{
//仅当分页更改时才应调用此函数
调度（分页数据（第页））；
};
常量handleSortFilter=params=>{
//仅当调用分页或排序时，才应调用此函数。
调度（SortFilterData（params））；
};
record.id}
列={columns}
数据源={data}
加载={tableActionInProgress}
分页={{
一旦改变：手摇，
pageSize:dataPerPage，
总数：CountData
}}
/>

更新 在ajax请求的antd表文档（）中，我可以看到每当我们更改sort或filter时，页面都会变回1。代码中是否有任何需要更改的内容，以便在更改过滤器或排序时，不应将页面参数设置为1

---

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

对于管理筛选器，在后端进行排序和分页，您需要在

handleChange

中管理表的状态：

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

从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中的参数实现查询。

请尝试制作一个可生成的示例，以便我们可以对其进行编辑，您可以使用沙箱：，您可以参考@DennisVash谢谢您的回复，我已经添加了示例代码，该代码位于antd文档（）中。您可以在这里@DennisVash找到codesandbox，所以基本上我的问题是，每当对antd表应用排序或过滤时，页面就被设置为1。这是antd的默认行为吗？我们是否可以对其进行自定义，以便即使我在特定页面上并应用排序/筛选，也不应将页面设置回1，而应使用我们所在的页码和筛选/排序参数发送请求。我了解到，这不是默认行为，在您共享的代码框中，在数据发生变化的每个排序中，当数据发生变化时，您预计会发生什么？如果你不知道第一页上发生了什么，你会一直呆在同一页上吗？这不是理想的行为。

表

只有在失去状态时才会“重置”到第1页。在没有看到任何代码或可生产的示例的情况下，我猜不出如何实现排序以及如何处理抓取时的渲染。您有足够的免费资源来制作一个模拟获取示例，并共享它，从而使您的问题成为一个完整的问题。

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)

        });
}