实现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") } })
以上就是实现分页的办法了
