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

【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"stripestyle="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实现前端分页
如何实现前端分页