antd table 实现分页和后端排序

74 阅读1分钟

image.png 问题描述:实现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 /> }}
  />