Question

我想在我的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请求（https://ant.design/components/table/#components-table-demo-ajax）的antd表文档中，我可以看到，只要更改排序或过滤器，它就会将页面改回1。我需要更改代码中的任何内容，以便无论何时过滤或排序更改后，不应将page参数设置为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中的参数实施查询。

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

1 个答案: