美文网首页
当前页码删除唯一数据后加载前一页内容

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

作者: JiAyInNnNn | 来源:发表于2019-08-12 21:56 被阅读0次

这个问题和上一篇
解决分页浏览后搜索无数据的问题
有异曲同工之处~

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里的事件就可以了~


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

我可以!!!

以上内容可以实现单条页面的操作,接下来补充批量操作如何写

以下内容是vue和iview框架实现的

首先在表单有多选功能和事件,以下事件
当我选中的长度和当前页面长度一样的时候,就需要请求前一页的数据了

              if(this.selection.length == this.nowSize &&  this.afterPage>='0' ){
                        this.getList(this.afterPage)
                    }else{
                        this.getList()
                    }

相关文章

网友评论

      本文标题:当前页码删除唯一数据后加载前一页内容

      本文链接:https://www.haomeiwen.com/subject/tqipjctx.html