js分页功能

先声明些全局变量方便我们在下面的代码中使用

//一页有多少条数据
let pagenum = 10;
//页码下标
let page_index = 0;
//总页数
let total_page;
// 声明一个用于接数据的变量
let data；
//获取数据
let res;

通过获取数据渲染页面

// 渲染函数 
function applys(data) {// 循环字符串拼接渲染let str = ``;for (let i = page_index *pagenum; i < (page_index + 1) * pagenum; 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);}

渲染数据里面调用的函数是页码的函数

// 页数渲染
function pagenumber(data) {let pagination = ``;pagination += `<div class="data-count">共 ${data.length} 条</div>`;pagination += `<select id="show" value="${pagenum}" onchange="selects()"><option ${pagenum == 10 ? 'selected' : ''} class="option" value="10">10条/页</option><option ${pagenum == 20 ? 'selected' : ''} class="option" value="20">20条/页</option><option ${pagenum == 50 ? 'selected' : ''} class="option" value="50">50条/页</option></select>  <div class="paging_Previous" id="up" onclick="back_page()"><img src="./img/lefte.png" alt="" /></div>`;// 获取总页数total_page = Math.ceil(data.length / pagenum);// 总页数小于6，执行if的内容，大于6执行elseif (total_page < 6) {for (let j = 0; j < total_page; j++) {pagination +=`<div class="paging_num" onclick="sort(${j})" ${page_index == j ? 'style="color:#0c66ff;"' : '""'}>${j + 1}</div>`;}} else {// 判断显示哪几页的页数if (page_index > total_page - 4) {pagination +=`<div class="paging_num" onclick="sort(${0})" ${page_index == 0 ? 'style="color:#0c66ff;"' : '""'}>1</div>...`;} else if (page_index >=3){page_num = page_index - 2;pagination +=`<div class="paging_num" onclick="sort(${0})" ${page_index == 0 ? 'style="color:#0c66ff;"' : '""'}>1</div>...`;}// 循环页数for (let j = page_index - 2 < 0 ? 0 : (page_index + 2 > total_page - 1 ? page_index = total_page - 3 :page_index - 2); j < page_index + 2; j++) {pagination +=`<div class="paging_num" onclick="sort(${j})" ${page_index == j ? 'style="color:#0c66ff;"' : '""'}>${j + 1}</div>`;}// 用来判断是否添加省略号if (page_index < 3) {sti +=`...<div class="paging_num" onclick="sort(${total_page - 1})" ${page_index == total_page - 1 ? 'style="color:#0c66ff;";' : '"'}>${total_page}</div>`;} else if (page_index <= total_page - 4) {sti +=`...<div class="paging_num" onclick="sort(${total_page - 1})" ${page_index == total_page - 1 ? 'style="color:#0c66ff;";' : '"'}>${total_page}</div>`;}}pagination += `<div class="paging_Previous" id="bottom" onclick="next_page()"><img src="./img/righte.png" alt="" /></div>`;pagination +=`<div>前往<input type="text" class="inputs" placeholder="请输入页码" onkeyup="if(event.keyCode==13){search()}">页</div>`;$('#paging').html(pagination);
}

然后是搜索页码，调用数据渲染函数，改变页码的高亮显示，改变分页渲染的内容

// 分页内容搜索function seach() {// 获取输入框的值let input = document.querySelector('.inputs').value;// 转换输入值为整数let pageNumber = parseInt(input, 10);// 验证输入值if (isNaN(pageNumber) || pageNumber < 1 || pageNumber > total_page) {// 弹出警告提示// 显示超出限制的提示tooltip.innerHTML = `超出页面范围`;//修改弹出窗的样式tooltip.style = "display:block;";$('.inputs').val('');setTimeout(function() {tooltip.style = "display:none";}, 2000);} else {// 更新当前页码page_index = pageNumber - 1;// 调用 apply 函数更新分页内容applys(res);}}

点击左箭头图片，调用数据渲染函数，显示上一页页码的高亮，改变页面渲染的数据

	//上一页function ups() {//page_index大于0if (page_index > 0) {//每次点击-1page_index--;//调用渲染applys(res);}}

点击右箭头图片，调用数据渲染函数，显示上一页页码的高亮，改变页面渲染的数据

//下一页function bottoms() {//page_index小于总页数-1if (page_index < total_page- 1) {//每次点击加1page_index++;}//调用渲染函数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值pagenum = value;// 重新计算总页数total_page = Math.ceil(res.length / pagenum);if (page_index > total_page - 1) {page_index= total_page - 1;}// 调用渲染函数applys(data);}

点击页码， 让页数的全局变量等于点击的页数，调用渲染显示点击的页码高亮，改变页码渲染的数据

// 点击切换页面数据事件function sort(j) {// 让页数调用点击的页数page_index= j;// 调用渲染函数applys(data);}