先聲明些全局變量方便我們在下面的代碼中使用

//一頁有多少條數據
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);}