纯前端分页（JS实现前端分页）

引言：

实现思路：

  1、定义所需要的变量

   2、接口获取所需数据

   3、实现方法

---

引言：

在实际开发中，大部分分页都是配合后端完成的。但有时候后端会一次性返回所有的数据，而我们前端不可能展示所有数据，而是弄一个分页效果。还有一些场景也是需要前端自己弄的分页，当表格的数据足够多，就需要实现前端分页效果。

实现思路：

首先获取到总数据tableData，总数据条数tableDataTotal，当前页currentPageNumber从1开始，按照每页tablePageSize为50的数据量，从起始点startData=0、结束点 endData=50 对总数据切割，并返回被切割的数据currentPageData。

1、定义所需要的变量

//定义变量
tableData:[],//表格展示数据
tableDataTotal:0,//总数据条数
allTableData:[],//总数据备份
currentPageNumber:1,//当前页
totalPageNumer:0,//可分多少页，总页数
tablePageSize:50,//每50一页
startData:0,//当前页的起始点
endData:50,//当前页的结束点
currentPageData:[],//当前页被切割的数据

移动端可以用触底刷新，当最后页面上所显示的数据总条数大于等于总数据条数时，说明数据已经分页加载完成，提示“已经到底了~”，否则，就在展示的的数据上再push上去一页的数据量。

//触底刷新
onReachBottom() {			
	if(this.tableData.length >= this.tableDataTotal){
		return uni.$u.toast('已经到底了~');
	}else {
		this._getRefreshTableData()
	}					
},

2、接口获取所需数据

API().then((res)=>{
  this.tableData=[]
  this.tableDataTotal=res.data.length
  //接口返回总数据res.data
  this.allTableData=JSON.parse(JSON.stringify(res.data))					
  this.tableData.push(...this._getPageTableData(this.allTableData))
})

3、实现方法

// // 分页加载数据// data为所有数据的数组，callback 拿到当前数据要做的操作 ,pageSize 一次取多少条
_getPageTableData(allData, pageSize = 20) {
  this.tableDataTotal=allData.length
  this.totalPageNumer = Math.ceil(this.tableDataTotal/ this.tablePageSize)//每20一页
  this.startData=(this.currentPageNumber - 1) * this.tablePageSize
  this.endData=this.currentPageNumber * this.tablePageSize
  this.currentPageData=allData.slice(this.startData, this.endData)
  return this.currentPageData
},
//加载分页数据
_getRefreshTableData(){
  if (this.tableData.length >= this.tableDataTotal) {
    return uni.$u.toast('已经到底了~');
    return 
  } else {
    this.currentPageNumber++
    this.tableData.push(...this._getPageTableData(this.allTableData))
    //console.log(this.tableData,'this.tableData')
  }					
},

谢谢观看！！！