先声明些全局变量方便我们在下面的代码中使用
//一页有多少条数据
let num = 10;
//页码
let k = 0;
//总页数
let divide;
// 用来判断显示哪几页的页数
let page_num = 0;
// 声明一个用于接数据的变量
let datas;
// 声明一个用于接数据的变量
let data;
//一页有多少条数据
let num = 10;
//获取数据
let res;
//下标
let k = 0;
//总页数
let divide;
//获取元素
let nums;
通过获取数据渲染页面
// 渲染函数
function applys(data) {// 循环字符串拼接渲染let str = ``;for (let i = k * num; i < (k + 1) * num; i++) {if (data[i] == undefined) break;str += `<div class="title" data-index="${data[i].id}"><div class="id">${data[i].id}</div><div class="industry" title="${data[i].name}" >${data[i].name}</div><div class="operatetime">${data[i].money}</div><div class="industry" >${data[i].setmeal == 1 ? '三天' : data[i].setmeal == 2 ? '七天' : data[i].setmeal == 3 ? '一个月' : data[i].setmeal == 4 ? '三个月' : data[i].setmeal == 5 ? '半年' : data[i].setmeal == 6 ? '一年' : data[i].setmeal == 7 ? '三年' : '五年'}</div><div class="demand"><img src="${dns + data[i].img}" alt="" onclick="photograph(${i})"></div><div class="industry" title="${data[i].status}" ><input class="bs_switch" id="bs_switch" onchange="support(${data[i].id},${data[i].status},${i})" type="checkbox" ${data[i].status == 2 ? 'checked' : ''}></div><div class="operatedate" title="${data[i].addtime}">${data[i].addtime}</div><div class="Addanewlevel"> <div class="editbox" onclick="redact(${data[i].id},${[i]})"> <div>编辑</div></div><div class="delete-loser" onclick="deletes(${data[i].id})"><div>删除</div></div></div></div>`;}pagenumber(data);$('#content').html(str);// 获取页数nums = document.getElementsByClassName('paging_noclick ');
}
渲染数据里面调用的函数是页码的函数
function pagenumber(data) {let tri = ``;tri += `<div class="data-count">共 ${data.length} 条</div>`;tri += `<select id="show" value="${num}" onchange="selects()"><option ${num == 10 ? 'selected' : ''} class="option" value="10">10条/页</option><option ${num == 20 ? 'selected' : ''} class="option" value="20">20条/页</option><option ${num == 50 ? 'selected' : ''} class="option" value="50">50条/页</option></select> <div class="paging_Previous" id="up" onclick="ups()"><img src="./img/lefte.png" alt="" /></div>`;// 获取总页数divide = Math.ceil(data.length / num);// 总页数小于6，执行if的内容，大于6执行elseif (divide < 6) {for (let j = 0; j < divide; j++) {tri +=`<div class="paging_noclick" onclick="sort(${j})" ${k == j ? 'style="color:#0c66ff;"' : '""'}>${j + 1}</div>`;}} else {// 判断显示哪几页的页数if (k < 3) {page_num = 0;} else if (k > divide - 4) {page_num = divide - 5;tri +=`<div class="paging_noclick" onclick="sort(${0})" ${k == 0 ? 'style="color:#0c66ff;"' : '""'}>${1}</div>...`;} else {page_num = k - 2;tri +=`<div class="paging_noclick" onclick="sort(${0})" ${k == 0 ? 'style="color:#0c66ff;"' : '""'}>${1}</div>...`;}for (let j = 0; j < page_num + 5; j++) {tri +=`<div class="paging_noclick" onclick="sort(${j})" ${k == j ? 'style="color:#0c66ff;"' : '""'}>${j + 1}</div>`;}// 用来判断是否添加省略号if (k < 3) {sti +=`...<div class="paging_noclick" onclick="sort(${divide - 1})" ${k == divide - 1 ? 'style="color:#0c66ff;";' : '"'}>${divide}</div>`;} else if (k <= divide - 4){sti +=`...<div class="paging_noclick" onclick="sort(${divide - 1})" ${k == divide - 1 ? 'style="color:#0c66ff;";' : '"'}>${divide}</div>`;}}tri += `<div class="paging_Previous" id="bottom" onclick="bottoms()"><img src="./img/righte.png" alt="" /></div>`;tri +=`<div>前往<input type="text" class="inputs" placeholder="请输入页码" onkeyup="if(event.keyCode==13){seach()}">页</div>`;$('#paging').html(tri);}然后是搜索页码，调用数据渲染函数，改变页码的高亮显示，改变分页渲染的内容
// 分页内容搜索function seach() {// 获取输入框的值let input = document.querySelector('.inputs').value;// 转换输入值为整数let pageNumber = parseInt(input, 10);// 验证输入值if (isNaN(pageNumber) || pageNumber < 1 || pageNumber > divide) {// 弹出警告提示// 显示超出限制的提示tooltip.innerHTML = `超出页面范围`;//修改弹出窗的样式tooltip.style = "display:block;";$('.inputs').val('');setTimeout(function() {tooltip.style = "display:none";}, 2000);} else {// 更新当前页码k = pageNumber - 1;// 调用 apply 函数更新分页内容applys(res);}}点击左箭头图片，调用数据渲染函数，显示上一页页码的高亮，改变页面渲染的数据
//上一页function ups() {//k大于0if (k > 0) {//每次点击-1k--;//调用渲染applys(res);}}点击右箭头图片，调用数据渲染函数，显示上一页页码的高亮，改变页面渲染的数据
//下一页function bottoms() {//k小于总页数-1if (k < divide - 1) {//每次点击加1k++;}//调用渲染函数applys(res);}选择下拉框的选项，设置选择的选项为选中状态，获取选择的选项的value赋值给全局数量的变量，然后调用渲染函数改变页面渲染数据的数量，总页数也会根据每页显示的条数进行改变
// 改变每页渲染的数据条数function selects() {// 获取下拉框的value let value = $('#show').val();// 获取下拉框let show = $('#show');// 获取下拉框的子级let option = $('.option');// 循环判断option是否是点击的for (let i = 0; i < option.length; i++) {// 如果是点击的让的选中状态为true，否则为falseif (option[i].value == value) {option[i].selected = true;} else {option[i].selected = false;}}// 让每页的数据等于下拉框的value值num = value;// 重新计算总页数divide = Math.ceil(res.length / num);if (k > divide - 1) {k = divide - 1;}// 调用渲染函数applys(datas);}点击页码， 让页数的全局变量等于点击的页数，调用渲染显示点击的页码高亮，改变页码渲染的数据
// 点击切换页面数据事件function sort(j) {// 让页数调用点击的页数k = j;// 调用渲染函数applys(datas);})
