列表最后一页删除末页最后一条时,自动跳转到上一页并获取上一页数据

代码放在获取列表的接口代码中,每次删除执行完,获取一下列表代码,假设获取列表数据的方法是getData()

// 这是 getData()中获取数据成功后的代码
if (res.code == 200) {
   this.intellStationData = res.data.list;
   this.dataCount = res.data.totalCount;
   
	// ==================================有用代码-star===============================
	// 获取列表数据的方法 getData()
	// 当前页是第几页 currentPage 
	// 列表数据总条数 dataCount
	// 每页展示多少条 pageSize
	// 总共多少页 pageCount 默认为1
	 this.pageCount = Math.ceil(Number(this.dataCount) / Number(this.pageSize)) 
	 //当前页大于总页数代表已经删除最后一条数据 将总页数赋值给当前页 会跳转到上一页
	 let crpage = this.currentPage > this.pageCount ? this.pageCount : this.currentPage
	 if(this.currentPage != crpage){
	     this.currentPage = crpage
	     this.getData()
	 }
	//当页数小于为1 就给它为1页 否则就还是当前页
	this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
	// ==================================有用代码-end================================
} else {
    this.intellStationData = [];
    this.dataCount = 0;
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以通过监听表格的删除事件,在删除操作完成后判断当前页是否还有数据,如果没有则跳转到上一页。 以下是一个示例代码: ```javascript import React, { useState } from 'react'; import { Table, Button } from 'antd'; const dataSource = [ { id: 1, name: 'John', age: 32 }, { id: 2, name: 'Mike', age: 25 }, { id: 3, name: 'Lucy', age: 28 }, { id: 4, name: 'Amy', age: 30 }, { id: 5, name: 'Tom', age: 35 }, { id: 6, name: 'Jack', age: 29 }, ]; const App = () => { const [data, setData] = useState(dataSource); const [current, setCurrent] = useState(1); const [pageSize, setPageSize] = useState(3); const handleDelete = (record) => { setData(data.filter((item) => item.id !== record.id)); // 判断当前页是否还有数据,如果没有则跳转到上一页 const currentPageData = data.filter((item, index) => { const startIndex = (current - 1) * pageSize; const endIndex = startIndex + pageSize; return index >= startIndex && index < endIndex; }); if (currentPageData.length === 0 && current > 1) { setCurrent(current - 1); } }; const columns = [ { title: 'ID', dataIndex: 'id', }, { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Action', render: (text, record) => ( <Button onClick={() => handleDelete(record)}>Delete</Button> ), }, ]; return ( <Table dataSource={data} columns={columns} pagination={{ current: current, pageSize: pageSize, total: data.length, }} onChange={(pagination) => { setCurrent(pagination.current); setPageSize(pagination.pageSize); }} /> ); }; export default App; ``` 在这个示例代码中,我们使用了 `useState` 来存储表格的数据当前页和每页显示的数量。在 `handleDelete` 函数中,我们先删除数据,然后判断当前页是否还有数据,如果没有则跳转到上一页。在表格的分页器中,我们通过 `onChange` 事件来监听分页器的变化,同更新当前页和每页显示的数量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值