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 // 每页数据条数
});

效果展示如下:

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM