分页的主要是为了解决当表单数据过多时，查看起来比较不方便吗，这个时候就需要分页查看。
效果演示：
HTML代码：
<div class="dibu"> <!-- 分页 --> <div class="an"> <button onclick="jian()" class="jian"> < </button> <span class="annnie"> </span> <button onclick="jia()" class="jia"> > </button> </div> <!-- 筛选 --> <div class="san"> <select name="" id="xiala" onclick="ccc()"> <option value="5">5条/页</option> <option value="7" >7条/页</option> <option value="10">10条/页</option> </select> </div> <!-- 跳转页 --> <div class="tiao"> 跳至<input type="text" style="width: 30px;" class="tiaozhuan">页 </div>
CSS代码：
.dibu { position: absolute; bottom: 30px; display: flex; justify-content: end; width: 100%; left: -30px; } .an button { width: 20px; height: 20px; color: black; margin-left: 5px; } .san { margin-left: 20px; margin-right: 10px; } .tiao { margin-right: 10px; }
js部分：
//首先声明两个变量，一个为当前页面，一个为页面的渲染的行数 let ye = 0;//页数 let ge = 5; //个数
//通过页数和个数循环数据 for (let i = ye * ge; i < (ye + 1) * ge; i++) { //判断数据是否存在undefined,如果不加上这一行并存在页面数量不满足个数要求，就可能报错 if (arr[i] != undefined) { str += '<tr><td>' + '<input type="checkbox" class = "check">' + ' <span>' + arr[i].serial + '     </span></td>' + '<td>' + arr[i].odd + '</td>' + '<td>' + arr[i].point + '</td>' + '<td>' + arr[i].classify + '</td>' + '<td>' + arr[i].grade + '</td>' + ' <td>' + arr[i].registrant + '</td>' + '<td style = "color:' + col + '">' + arr[i].status + '</td>' + '<td>' + arr[i].time + '</td>' + '<td>' + arr[i].operate + '</td></tr>' } }
渲染按钮数量：
let aaa = Math.ceil(arr.length / ge) for (let j = 0; j < aaa; j++) { anstr += '<button class = "anan" strly="padding:10px;" onclick = fn(' + j + ')>' + (j + 1) + '</button>'; }
按钮点击事件：
//翻页事件 function fn(j) { ye = j; // console.log(j); //重新渲染页面 xuanran() }
//减翻页事件 function jian() { document.getElementsByClassName('jian') let aaa = Math.ceil(arr.length / ge) if (ye > 0 && ye <= aaa) { console.log(ye); ye-- xuanran() } } //加翻页事件 function jia() { let aaa = Math.ceil(arr.length / ge) if (ye == (aaa - 1)) { ye = (aaa - 1) } else { ye++ xuanran() } }
下拉框选择页面数量：
//选择每页的个数 let xiala = document.getElementById('xiala') function ccc() { if (xiala.value == 5) { console.log(xiala.value); ge = 5; setTimeout( function () { ye = 0; xuanran() }, 1000) } else if (xiala.value == 7) { ge = 7; setTimeout( function () { ye = 0; xuanran() }, 1000) } else { ge = 10; setTimeout( function () { ye = 0; xuanran() }, 1000) } }
跳转页面数量：
//跳转页面数 let tiaozhuan = document.getElementsByClassName('tiaozhuan')[0]; tiaozhuan.addEventListener('keyup', function () { let aaa = Math.ceil(arr.length / ge) let t = tiaozhuan.value; if (t != '' && t <= aaa) { tiaozhuan.onkeypress = function (event) { if (event.which === 13) { ye = 0; //点击回车要执行的事件 ye += parseInt((t - 1)); console.log(t - 1); xuanran() ye = 0; } } } })
