前端表格分页功能

我的设想

1.一次性将所有数据请求到，然后分成很多部分给前端来显示

（优点：一次性请求完成，无需再请求，缺点：可能用户并不需要用到全部的数据段，而且数据量大的话请求很慢，非常影响用户体验）

2.分若干步请求数据，用户点击到哪一页，数据库请求哪一个区间段的数据（推荐）

（优点：用户需要哪部分请求哪部分，不需要将所有数据都拿过来，缺点：数据来到有延迟，因为每一次点击都是一次请求）

难点

如何确定用户请求哪一段数据并返回给用户

实现

在sql语句中有两个参数limit和offset当然也可以只用一个limit，他们的作用是请求时返回相应区间的数据

limit和offset：limit后面跟需要的数据条数，offset后面跟起始查询位置（从0开始）

所以我们只需要对这两个参数做文章即可，前端确定表格展示多少行，共有多少页，每次点击到某一页时知道当前的页码即可。

我们只需要对前端所要展示的表格添加一个触发函数，当用户需要点击任意页时，返回此页的页数，根据表格展示每页多少条数据，可以将limit的值和offset的值计算并发送请求至后台，后台再将相应的数据返回，这样就可以达到所想要的效果。

效果展示&代码

此功能采用vue2+axios+php+element ui来实现
其实可以采用任意后端语言（java，php等）以及前端请求（axios，ajax等）来配合完成,主要是对SQL中limit和offset的用法进一步了解。

效果展示

代码展示

//我对axios进一步的封装
export async function MyAxios(url,parms,success,failure) {

   await axios.get(url,{params:parms}).then(
        response=> {
            success(response)
        },
        error=>{
            failure(error)
    })

//php
function getUserInfos($limits,$offsets){
    $sql="select account,place,lasttime,counts from vue_userInfo ORDER BY lasttime DESC limit $limits offset $offsets ";
    return json_encode(ExecuteQuery($sql));
}

//vue2代码
<template>
  <div>

    <el-table
      class="userTable"
      :data="userData"
      border
      stripe
      max-height=770px
      highlight-current-row
      style="width: 100%">
      <el-table-column
        prop="account"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="place"
        label="登录地址"
        width="180">
      </el-table-column>
      <el-table-column
        prop="counts"
        label="登录次数">
      </el-table-column>
      <el-table-column
        prop="lasttime"
        label="最近登录时间">
      </el-table-column>
  </el-table>
      <el-pagination
      style="margin-top:10px"
      background
      layout="prev, pager, next"
      :page-size="15"
      @current-change="dealCurrentChange"
      :current-page="currentPage"
      :total="counts">
    </el-pagination>
  </div>
</template>

<script>
import {MyAxios} from '../utils/Verify.js'
  export default {
    data() {
      return {
        userData:[],
        counts:0,
        currentPage:1,
        limits:15,
        offsets:0
      }
    },
    computed:{
      parms(){
        return {action:'SearchInfos',limits:this.limits,offsets:this.offsets}
      }
    },
    created() {
      this.initData()
    },
    mounted() {
      console.log(this.account+"------"+this.password);
    },
    methods: {
      // 初始化数据
      initData(){
        this.offsets=0;
        MyAxios('/VDB/',this.parms,res=>{
          this.counts=JSON.parse(res.data.counts);
          this.userData=JSON.parse(res.data.Userlist)
          },error=>{console.log(error.message);})
      },
      // 处理页码改变时
      dealCurrentChange(val){
        this.offsets=(val-1)*this.limits
        MyAxios('/VDB/',this.parms,res=>{
        this.userData=[];
        this.userData=JSON.parse(res.data.Userlist)
        },error=>{console.log(error.message);})
      },

    },
  }
</script>
//此处需要用到vue的一系列知识点，不采用vue可以只看methods中的方法，只需要明白逻辑即可

element ui分页组件的地址—>其中有相应的文档，按文档查看即可

如果有什么不完善或者说做的不好的地方欢迎指出。