【js/vue笔记】怎么实现前端分页？（纯js前端分页方法以及vue的实现方法）

开发过程中，分页功能一般都是后端来做的，因为数据量大的话，后端处理会比较地合适，前端就只需要传page(当前页码)和pageSize（每页最大显示条数），及其他后端需要传的参数就可以了。

但也不排除特殊情况需要我们前端去进行处理，特殊情况如下
1.后端由于某些表或其他原因，不方便进行分页传回数据，例如后端小哥突然跑过来很殷勤地说：“这次可不可以帮忙分页啊，我这边有点不太方便”，如果数据量比较小的情况下，我们就就可以帮忙分担
逻辑点如下，前端先获取后端返回的数据保存下来，然后在本地进行分页并渲染显示

一、纯js前端分页方法

/**
* @name getTableData
* @param {Number} page 当前页 默认1
* @param {Number} pageSize 每页最多显示的条数，默认10
* @param {Array} totalData 总的数据集，默认为空数组
* @return {Object}{
	data //当前页展示数据 数组
	page //当前页码
	pageSize //每页最多显示条数
	length //总的数据条数
}
**/

const getTableData=(page=1,pageSize=10,totalData=[])=>{
const {length}=totalData
const tableData={
data:[],
page,
pageSize,
length,
}
//pageSize大于等于总数据的长度，说明只有一页的数据或者没有数据
if(pageSize>=length){
tableData.data=totalData
tableData.page=1
}
//假如pageSize小于总数据长度，则数据多余一页
else{
//计算除了当前页之外的数据总量
const num=pageSize*(page-1)
//假如当前页之前的所有数据小于总的数据集长度，不能等于，这个时候则说明当前页码没有超过最大的页码
if(num<length){
//当前页的第一条数据的索引
let startIndex=num
//当前页的最后一条数据的索引
let endIndex=num+pageSize-1
tableData.data=totalData.filter((_,index)=>index>=startIndex &&index<=endIndex)
}
//当前页码超出最大的页码，则计算实际最后一页的page，自动返回最后一页的数据
else{
//取商
let size=parseInt(length/pageSize)
//取余数
let rest=length % pageSize
//假如余数大于0，说明最后一页数据不足pageSize，应该取size+1为最后一条的页码
//余数大于0，说明实际最后一页的数据不足pageSize,最后一页应该size+1
if(rest>0){
tableData.page=size+1
tableData.data=tableData.data=totalData.filter((_,index)=>index>=(pageSize*size) && index<=length)
}
//余数等于0，最后一页的数据条数正好是pageSize
else if(rest===0){
tableData.page=size
tableData.data=totalData.filter((_,index)=>index>=(pageSize*size-1) && index<=length)
}
}
}

}
return tableData
}

二、结合vue+element-ui的分页方法

1.适用场景
一般用于数据量较小的情况，一次请求把数据全部从后端请求回来

2.实现关键
适用计算属性对获取的数据进行处理，即computed中的searchPageChange方法，然后el-table中的：data绑定searchPageChange这个方法

 <el-table
      :data="searchPageChange"
      style="width: 100%"
      height="50">
 </el-table>

//计算属性对数据进行处理
computed:{
//当前页-1再和页数有多少相乘
let start=(this.currentPage-1)*this.pageSize
//假如初始页大于当前数据量的总长度，那么说明没有数据，则
if(start>=this.searchData.length)start=0
let end=this.currentPage*this.pageSize
if(end>=this.searchData.length)end=this.searchData.length
return this.searchData.slice(start,end)
}

以下是vue的完整代码

<template>
  <div class="hello">
    {{msg}}
    <div>
      <el-table
        :data="searchPageChange"
        stripe
        style="width: 1000px;margin:30px auto;"
        height="550"
      >
        <el-table-column prop="date" label="日期" width="100">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="190">
        </el-table-column>

        <el-table-column label="个人信息" width="180" align="center">
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="height" label="身高" align="center">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        class="z-pagination"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        layout="sizes, prev, pager, next, jumper,total"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  // 数据来源
  import { searchData} from "./js/options";
  export default {
    name: "frontEndPage",
    data() {
      return {
        msg: "前端分页",
          currentPage: 1, // 当前页
          pageSize: 10, // 展示页数
          pageSizes: [10, 20, 30, 40], // 可选择展示页数 数组
        searchData
      };
    },
    computed: {
      // 计算属性对数据进行处理
      searchPageChange() {
       let start = (this.currentPage - 1) * this.pageSize;
       if (start >= this.searchData.length) start = 0;
       let end = this.currentPage * this.pageSize;
       if (end >= this.searchData.length) end = this.searchData.length;
       return this.searchData.slice(start, end);
     }
    },
    methods: {
      // 改变分页数量
      handleSizeChange(val) {
        this.pageSize = val;
      },
      // 改变当前页
      handlePageChange(val) {
        this.currentPage = val;
      }
    }
  };
</script>

options.js配置文件

/**
 * 表头配置
 */

const searchData= [
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1510 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-04",
    name: "李小虎",
    address: "上海市普陀区金沙江路 1511 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-01",
    name: "孙小虎",
    address: "上海市普陀区金沙江路 1512 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-02",
    name: "朱小虎",
    address: "上海市普陀区金沙江路 1513 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-04",
    name: "钱小虎",
    address: "上海市普陀区金沙江路 1514 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-01",
    name: "杜小虎",
    address: "上海市普陀区金沙江路 1515 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-03",
    name: "赵小虎",
    address: "上海市普陀区金沙江路 1516 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-02",
    name: "陈小虎",
    address: "上海市普陀区金沙江路 1510 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-04",
    name: "吴小虎",
    address: "上海市普陀区金沙江路 1511 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-01",
    name: "徐小虎",
    address: "上海市普陀区金沙江路 1512 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-02",
    name: "黄小虎",
    address: "上海市普陀区金沙江路 1513 弄",
    age: 18,
    height: "180cm"
  },
  {
    date: "2016-05-04",
    name: "秦小虎",
    address: "上海市普陀区金沙江路 1514 弄",
    age: 18,
    height: "180cm"
  }
];
export { searchData};

此文章部分借鉴这位老哥
js实现前端分页
如何实现前端分页