分页功能是一个很好玩的功能，在很多浏览器的底部都会有显示分页的效果，想去第几页去第几页
今天就来做一下分页功能。
实现效果如下：
渲染函数代码如下：
//渲染函数，函数名为fn function fn() { //计算数据的总数量除以当前页数据的数量 num = Math.ceil(ppt.length) / row //声明一个空字符串，渲染第几页 let etr = `` //声明一个空字符串，渲染页数 let atr = `` //声明一个空字符串，渲染内容 let str = `` //for循环整个数据 for (let i = row * page; i < row * (page + 1); i++) { if (ppt[i] != undefined) { str += `<p> <span>${i+1}</span> <span>${ppt[i].name}</span> <span>${ppt[i].money}</span> <span>${ppt[i].expend}</span> </p>` } } for (let i = 0; i < num; i++) { if (page == i) { etr += `<p> <span>现在</span> <strong>${i+1}</strong> <span>页/</span> <strong>${Math.ceil(num)}</strong>页 </p>` atr += `<p onclick="tt(${i})" style="color:red">${i+1}</p>`; } else { atr += `<p onclick="tt(${i})">${i+1}</p>`; } } div1.innerHTML = etr div.innerHTML = str ye.innerHTML = atr }
点击事件代码如下：
//上一页点击事件 function s() { if (page > 0) { page-- } else { alert("到第一页了") } fn() } //下一页点击事件 function x() { if (page < num - 1) { page++ } else { alert("到最后一页了") } fn() } //页数点击事件 function tt(arr) { page = arr console.log(arr); fn() } //每页几条点击事件 function f() { let sel = document.getElementById("sel").value row = sel page = 0 fn() }
回车事件代码如下：
//回车事件 input.onkeydown = function(e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.event || e; var code = theEvent.keyCode || theEvent.which || theEvent.charCode; if (code == 13) { let inputt = document.getElementById("input").value console.log(inputt); if (inputt > 0 && inputt < num + 1 && inputt != "" && inputt == parseInt(inputt)) { page = inputt - 1 } else { alert("没有此页面") } input.value = "" } fn() }
