原生js前端实现分页功能

原生js前端实现分页功能

html

<p>一共多少页<span class="Yeshu"></span></p>
<div class="boxs"></div>
<button class="btnPush">上一页</buttton>
<button class="btnPop">下一页</button>

js部分

let index = 0;
//data数据 sum每页多少行
function boxJson(data,sum){
	let baseArray = data;
	let len = baseArray.length;
	let n = sum; //每行显示对少个个
	let lineNum = len % sum === 0 ? len / sum : Math.floor( (len / sum) + 1 );
	let res = [];
	for (let i = 0; i < lineNum; i++) {
	// slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
	let temp = baseArray.slice(i*n, i*n+n);
	res.push(temp);
	}
	return res;
}
data(index)
function data(sum){
	let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
	let data = boxJson(arr,7)[sum]; // [sum]默认展示第一行
	document.getElementsByClassName("Yeshu")[0].innerHTML = boxJson(arr,7).length;
	let str = '';
	for (var i = 0; i < data.length; i++) {
		str+=`<p>${data[i]}</p>`
	}
	document.getElementsByClassName("boxs")[0].innerHTML = str;
	return boxJson(arr,7);
}

document.getElementsByClassName("btnPush")[0].onclick = function(){
	let dataLength = data(index).length;
	if (index == 0) {
		alert("这是第一页")
	}else{
		index--;
	}
	data(index)
}
document.getElementsByClassName("btnPop")[0].onclick = function(){
	let dataLength = data(index).length;
	if (index == dataLength) {
		alert("这是最后一页")
	}else{
		index++;
	}
	data(index)
}