js如何实现分页功能

实现JS分页可以通过以下步骤：
1. 获取数据：从服务器或本地获取数据，并将数据存储在一个数组或对象中。

let shu = [{
		number: 1,
		name: "秦全",
		price: 100,
		deng: "二档二级",
		xue: "初中",
		zhuang: "离职",
		tme: "2000"
	},
	{
		name: "秦泉",
		number: 2,
		price: 200,
		deng: "二档一级",
		xue: "初中",
		zhuang: "在职",
		tme: "2000"
	},
	{
		number: 3,
		name: "秦犬",
		price: 300,
		deng: "二档二级",
		xue: "高中",
		zhuang: "在职",
		tme: "2001"
	},
	{
		name: "秦朝",
		number: 4,
		price: 1900,
		deng: "二档一级",
		xue: "大学",
		zhuang: "在职",
		tme: "1999"
	},
	{
		name: "秦小超",
		number: 5,
		price: 1200,
		deng: "二档一级",
		xue: "高中",
		zhuang: "在职",
		tme: "2000"
	},
	{
		name: "秦秦",
		number: 6,
		price: 2800,
		deng: "二档一级",
		xue: "大专",
		zhuang: "在职",
		tme: "2002"
	},
	{
		name: "秦超菜",
		number: 7,
		price: 1.01,
		deng: "二档二级",
		xue: "初中",
		zhuang: "在职",
		tme: "2001"
	},
	{
		name: "秦沟去",
		number: 8,
		price: 200,
		deng: "二档二级",
		xue: "高中",
		zhuang: "在职",
		tme: "2000"
	},
	{
		name: "秦随篇",
		number: 9,
		price: 1000,
		deng: "二档二级",
		xue: "大学",
		zhuang: "离职",
		tme: "2001"
	},
	{
		name: "秦变",
		number: 10,
		price: 1000,
		deng: "二档二级",
		xue: "大学",
		zhuang: "离职",
		tme: "2001"
	},
	{
		name: "秦够",
		number: 11,
		price: 1000,
		deng: "二档二级",
		xue: "大学",
		zhuang: "离职",
		tme: "2001"
	},
	{
		name: "秦希",
		number: 12,
		price: 1000,
		deng: "二档二级",
		xue: "大学",
		zhuang: "离职",
		tme: "2001"
	}, {
		name: "秦西",
		number: 13,
		price: 1000,
		deng: "二档二级",
		xue: "大学",
		zhuang: "离职",
		tme: "2001"
	},
	{
		name: "秦篇",
		number: 14,
		price: 1000,
		deng: "二档二级",
		xue: "大学",
		zhuang: "离职",
		tme: "2001"
	},
	{
		name: "秦随",
		number: 15,
		price: 1000,
		deng: "二档二级",
		xue: "大学",
		zhuang: "离职",
		tme: "2001"
	},
	{
		name: "秦随",
		number: 15,
		price: 1000,
		deng: "二档二级",
		xue: "大学",
		zhuang: "离职",
		tme: "2001"
	}

]

2. 设置每页显示的数量和当前页码：确定每页要显示的数据数量，以及当前页码。

let num = 0;
let page = 5;
let connt = Math.ceil(shu.length / page);

3. 计算总页数：根据数据的总数和每页显示的数量，计算出总页数。

​

	let connt = Math.ceil(shu.length / page);
	

​

4. 显示当前页的数据：根据当前页码和每页显示的数量，从数据数组或对象中提取对应页码的数据。

function renders() {
	let ran = `<span id="iuo"" onclick="hg()" ><</span>`;
	let connt = Math.ceil(shu.length / page);
	for (let i = 0; i < connt; i++) {
		ran += `
		<span class="pu" onclick="qo(${i})"  style="background-color:${num == i ?'pink':'#EEEEEE'}">${i+1}</span>
		
		`;
	}
	ran += `<span id="iuo""  onclick="wq()" >></span>
	
	`;
	document.getElementsByClassName("xuan")[0].innerHTML = ran
	tcf()
}

5. 生成分页按钮：根据总页数，生成相应数量的分页按钮，并为每个按钮绑定点击事件。

rt.onchange = function() {
	let sel = document.getElementById("rt")
	let index = sel.selectedIndex;
	let uim = sel.options[index].value;
	console.log(uim);
	page = uim
	num = 0
	render()
}

6. 点击分页按钮更新数据：当用户点击分页按钮时，根据按钮对应的页码更新当前页码，并重新显示当前页的数据。

let qin = document.getElementById('qin');
qin.addEventListener('keyup', function() {
	let connt = Math.ceil(shu.length / page)
	let t = qin.value;
	if (t != '' && t <= connt && t % 1 == 0) {
		qin.onkeypress = function(event) {
			if (event.which === 13) {
				//点击回车要执行的事件
				num = t - 1;
				console.log(num);
				render()

			}
		}
	} else if (t > connt) {
		alert("已经没有更多的页数了")
	} else if (t != 0) {
		alert("不能小于0")
	}
})

以上就是实现分页的办法了