乐趣区

关于javascript:elementUI分页在不知道总数的时候完成分页

jiezi

接口因为数据过多，无奈查问整表，无奈给出数据总数，且须要页面分页的状况

1.pagination vue 展现 

        <el-pagination 
        class="table-pager" 
        @current-change="currentchange" 
        :current-page.sync="current" 
        :page-size="pagesize"
        :total="total"
        layout="prev,next">
        </el-pagination>

2. 初始化值

  • 分页组件的 layout 仅展现左右键按钮
  • total 值必填，先默认为 pagesize
  • current 以后页码，默认 1
  • 应用以后页码变动触发分页事件

3. 以后页码变动触发

  • 批改页码前的当前页码数与每页数量的乘积是否曾经大于计算的 total 值，如果大于则没有下一页
  • 如果能进入下一页，则须要再更新一下 total 值，便于下一轮能进入下一页
  • 如果 current 在获取数据的时候曾经小于 pagesize,，则示意没有更多信息，无须再进入下一页，即不须要更新 total
  • 简而言之，下一页的按钮是否能触发，取决于当前页的返回数据的长度是否等于 pagesize，如果等于则须要把 total 再减少一个 pagesize 值。否则不减少，也不能再点击下一页。
    currentchange(val){if((this.current-1)*this.pagesize > this.total){
        this.$message({
          type:'warning',
          message:` 没有信息了 `
        })
        this.current=val-1;
        return
      }
      this.current=val;
      this.getAccessLogs()},
    getAccessLogs(){
      this.loading=true;
      if(this.current==1){this.total=this.pagesize}
      this.$apollo.query({
        query: gqlreq.accessLogs,
        variables:{
          first:this.pagesize,
          offset:((this.current-1)>=0)?(this.current-1)*this.pagesize:0
        }
      }).then(async (res) => {
          this.loading=false;
         if (res.data && res.data.accessLogs&& res.data.accessLogs) {this.tabledata=commonjs.takeoffEdges(res.data, "accessLogs");
          if((this.tabledata&&this.tabledata.length)){if(!(this.tabledata.length<this.pagesize)){this.total=(this.current+1)*this.pagesize
            }
          }else{
            this.$message({
              type:'warning',
              message:` 以后查问第 ${this.current} 页，没有信息了 `
            })
          }
        }
      }).catch((e)=>{console.log('catch err',e)
        this.loading=false;
      })
    },
退出移动版