antd-table-分页
1.对pagination参数进行设置const paginationProps = {current: pageNum,pageSize,// showTotal: () => (//<span>总共{total}项</span>// ),total,onChange: page => handlePageChange(page),hideOnSinglePa
·
1.对pagination参数进行设置
const paginationProps = {
current: pageNum, //当前页码
pageSize, // 每页数据条数
// showTotal: () => (
// <span>总共{total}项</span>
// ),
total, // 总条数
onChange: page => handlePageChange(page), //改变页码的函数
hideOnSinglePage: false,
showSizeChanger: false,
};
2.table组件的属性配置(分页的话,我们只需关注pagination这个属性就OK了)
<Table columns={columns} dataSource={datalist} pagination={paginationProps} />
3.改变页数的回调函数
// 改变页码的回调 page代表页码数 pageSize代表每页条数
const handlePageChange = (page) => {
queryPersonalScenceList(page, pageSize);
};
注意:当分页接口调用成功后,分页接口返回的列表数据应及时的更新给table数据(例如该例子中就是要更新datalist数据,可以将datalist保存在state中,当页面接口调用成功后就setDatalist(datalist)。)。我这里使用redux-saga调用的接口,更新数据这一操作,我在saga里做了处理,所以代码中没能体现出来。
table数据的话,就要在页面初始化的时时候调用,如果你用的是function组件就可以在useEffect里调用接口。代码如下:
useEffect(() => {
// 初始化的时候,我们默认请求第一页的数据
queryPersonalScenceList(1, pageSize);
}, [queryPersonalScenceList]);
更多推荐
已为社区贡献3条内容
所有评论(0)