前端获取分页数据时,如何实现删除完某一条数据后,还在当前页
时间: 2024-02-01 15:16:58 浏览: 28
删除完某一条数据后,如果要保持当前页不变,可以通过以下步骤实现:
1. 获取当前页的页码和每页显示的数据条数。
2. 删除选中的数据。
3. 计算当前页的数据条数,如果小于每页显示的数据条数,则返回上一页。
4. 如果是当前页的最后一条数据被删除,则返回上一页。
5. 如果是当前页的第一条数据被删除,则保持当前页不变。
6. 重新请求当前页的数据,渲染页面。
具体实现方式如下:
1. 在删除操作的回调函数中,获取当前页的页码和每页显示的数据条数。
```javascript
const currentPage = getCurrentPage(); // 获取当前页的页码
const pageSize = getPageSize(); // 获取每页显示的数据条数
```
2. 删除选中的数据。
```javascript
deleteData(selectedDataId); // 删除选中的数据
```
3. 计算当前页的数据条数,如果小于每页显示的数据条数,则返回上一页。
```javascript
const totalDataCount = getTotalDataCount(); // 获取总数据条数
const currentDataCount = getCurrentDataCount(); // 获取当前页的数据条数
if (currentDataCount < pageSize) {
setCurrentPage(currentPage - 1); // 返回上一页
}
```
4. 如果是当前页的最后一条数据被删除,则返回上一页。
```javascript
const lastDataId = getLastDataId(); // 获取当前页的最后一条数据的ID
if (selectedDataId === lastDataId) {
setCurrentPage(currentPage - 1); // 返回上一页
}
```
5. 如果是当前页的第一条数据被删除,则保持当前页不变。
```javascript
const firstDataId = getFirstDataId(); // 获取当前页的第一条数据的ID
if (selectedDataId === firstDataId) {
// 保持当前页不变
}
```
6. 重新请求当前页的数据,渲染页面。
```javascript
requestData(currentPage, pageSize); // 重新请求当前页的数据
renderPage(); // 渲染页面
```