分页切换当前页仅有一个数据被删除后不向前一页跳转解决

这个问题是,下方有分页,上方有一个ul,第一页的li是满的,第二页只有一条数据,我的请求逻辑是,点分页就向后端发送请求,请求当前页的数据,每一页最多14条,比如这里第一页后台返给我14条数据,第二页返给我1条数据,然后我把第二页的唯一一个数据删了,然后向后台请求数据,就会出现,我传过去的依然是第二页请求,返给我的是空数据,页面上就是白的,这是因为没有做为空判断,应该在当前页最后一个数据被删了,然后往前一页去请求。

点击删除会去调用删除事件deleteList,并请求删除接口deleteEntity,红色框内就是当前页最后一条被删往前一页请求的判断,然后就是分页请求事件。

 

 这里的判断主要是去更改data里的分页参数,totalRecords是一共有多少页,pageSize是一页展示多少条数据,pageNo是当前是第几页。

// 删除这个作品
      async deleteList(listId) {
      let entityId = listId;
      try {
        let res = await deleteEntity(entityId);
        this.$message.success('删除成功');
        const totalPage = Math.ceil((this.totalRecords - 1) / this.pageSize); 
        // 总页数
        this.pageNo = this.pageNo > totalPage ? totalPage : this.pageNo;
        this.pageNo = this.pageNo < 1 ? 1 : this.pageNo;
        this.init();
      } catch (error) {
        console.log(error, 'ERROR');
        this.$message.error(error.msg || '删除失败,请重试');
      }
    },
删除完某一条数据后,如果要保持当前页不变,可以通过以下步骤实现: 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(); // 渲染页面 ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值