当前页码删除唯一数据后加载前一页内容

tips:vue环境

先讲一下思路。
获取列表数据的接口,默认后台回返回一个数组,就是我们需要渲染在页面上的数据,另外一个就是总数(total),用于分页组件显示共有多少条数据。
分页组件中我们需要一个值,就是当前分页组件的大小(一页显示多少条数据)实例代码会用pageSize来代替。
我们默认每次删除成功后会重新向后台请求一遍列表数据。
当我最开始加载页面的时候,获取到后台返回的数据总数,然后在data里声明两个变量,为数值类型。

method:{
 getList(pageNumber ){
  let params ={
     pageNumber: pageNumber ? pageNumber : this.page.current,
     //其他内容略
    }
     发送请求.then(data =>{
       this.getList  = data.list  //返回内容
       this.page.total = data.count;//后端返回的总数
 
        this.afterPage= Math.floor(this.page.total / this.page.size);
         全部的数据值/页面大小 并且向下去整数
        this.nowSize= this.page.total % this.page.size;
         全部的数据值除页面大小的余数  最后一页的数据条数
    })

  //删除事件
       发送删除请求.then(() => {
       if(this.nowSize ='1' && this.afterPage>='0'){
           this.getList(this.afterPage)
        }else {
           this.getList()
        }
   })
}

由于我取到的afterPage是向下取整的,所以需要请求前一页数据的时候不需要-1,但是当我当前页码为1时,我的afterPage就是0了,为了避免我向后台传入pageNumer=0,加了一层判断。直接走else里的事件就可以了~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
删除完某一条数据后,如果要保持当前页不变,可以通过以下步骤实现: 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(); // 渲染页面 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值