table分页onShowSizeChange后的pageNo解决-开发者知识库平台

table分页onShowSizeChange后的pageNo解决

table

1299

2023/8/27 15:08:37

栏目: 编程语言

在table分页中，当用户选择每页显示的条数发生变化时，可以通过以下方法解决pageNo的问题：

在onShowSizeChange事件中，将pageNo重置为1，这样每次改变每页显示的条数时，都会将当前页重置为第一页。

onShowSizeChange = (current, pageSize) => {
this.setState({
pageNo: 1,
pageSize: pageSize,
});
// 其他逻辑
};

在表格数据请求时，根据当前页码和每页显示的条数计算出新的起始索引，然后根据新的起始索引和每页显示的条数获取新的数据。

getData = () => {
const { pageNo, pageSize } = this.state;
const startIndex = (pageNo - 1) * pageSize;
// 根据startIndex和pageSize获取数据
// 其他逻辑
};

更新表格数据时，根据新的数据和总条数重新计算页码并更新state中的pageNo。

updateTableData = (data, total) => {
const { pageSize } = this.state;
const totalPages = Math.ceil(total / pageSize);
let { pageNo } = this.state;
if (pageNo > totalPages) {
pageNo = totalPages;
}
this.setState({
data: data,
total: total,
pageNo: pageNo,
});
};

这样就可以保证在改变每页显示的条数时，正确地更新当前页码并获取相应的数据。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

table分页onShowSizeChange后的pageNo解决

最新知识库

相关标签