问题描述:实现table分页和排序,将sort方法和分页方法分开写,会造成分页切换问题,因为每次页码切换时都会触发sort方法,将页码重置为第一页
以下是错误代码:
const onPageChange = (page, _pageSize) => {
setPagination({ ...pagination, current: page });
const newPagition = {
page,
pageSize: pagination.pageSize,
};
getRecordList({ ...filter, ...newPagition });
};
const onShowSizeChange = (_page, pageSize) => {
pagination.current = 1;
pagination.pageSize = pageSize;
setPagination({ ...pagination });
const newPagition = {
page: 1,
pageSize,
};
getRecordList({ ...filter, ...newPagition });
};
const sort = (_pagination, _filters, sorter) => {
const orderBy = sorter.field || 'id';
const orderWay = sorter.order === 'ascend' ? 'asc' : 'desc';
const newFilter = {
...filter,
orderBy,
orderWay,
};
setFilter(newFilter);
const newPagition = {
page: pagination.current,
pageSize: pagination.pageSize,
};
getRecordList({ ...filter, ...newPagition });
};
<Table
rowKey={(record: any) => record.id}
pagination={{
current: pagination.current,
pageSize: pagination.pageSize,
total,
showTotal: totals => `总计 ${totals} 条 `,
showSizeChanger: true,
onChange: onPageChange,
onShowSizeChange: onShowSizeChange,
}}
columns={columns}
expandIcon={expandIcon}
expandedRowRender={expandedRowRender}
dataSource={list}
onChange={sort}
locale={{ emptyText: <NoData /> }}
/>
正确方法应该是将onPageChange()和sort()方法都写在onchange中
// 当分页或排序发生变化时调用
const handleTableChange = (_pagination, _filters, sorter) => {
const orderBy = sorter.field || 'id';
const orderWay = sorter.order === 'ascend' ? 'asc' : 'desc';
setPagination(_pagination);
setSortInfo({ orderBy, orderWay });
getRecordList({
...filter,
orderBy,
orderWay,
page: _pagination.current,
pageSize: _pagination.pageSize,
});
};
<Table
rowKey={(record: any) => record.id}
pagination={{
current: pagination.current,
pageSize: pagination.pageSize,
total,
showTotal: totals => `总计 ${totals} 条 `,
showSizeChanger: true,
}}
columns={columns}
expandIcon={expandIcon}
expandedRowRender={expandedRowRender}
dataSource={list}
onChange={handleTableChange}
locale={{ emptyText: <NoData /> }}
/>