react antd table自定义分页

<Table
    style={{ marginTop: 20 }}
    columns={columns}
    dataSource={dataSource}
    rowKey={record => record.id}
    pagination={{ // 具体配置可看antd官网文档Pagination的API部分
      position: ['bottomRight'],
      size: 'small',
      showQuickJumper: true,
      defaultCurrent: 1,
      total: page.total_count,
      pageSize: page.page_size,
      current: page.page_no,
      showSizeChanger: true,
      showTotal: total => `共${total}条`,
      onChange: (pageNo, pageSize) => getTableList(pageNo, pageSize!)
    }}
/>

page初始化:

const [page, setPage] = useState({
   total_count: 0, // 总页数
   page_no: 1, // 当前页码
   page_size: 20 // 每页数据条数
});

效果展示如下:

原文地址:https://www.cnblogs.com/atao24/p/15218974.html