一直以来有许多兄弟问我分页怎么写，我今天就来给大家讲解下分页的简单技巧，不过兄弟们也知道我不怎么喜欢打字，喜欢打代码，话不多说，直接上代码，直接上注释，gogogo！！！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/jquery-3.7.1.js"></script> <style> .data_content { width: 60%; margin-left: 20%; display: flex; flex-direction: column; align-items: center; background-color: antiquewhite; } .content_box { margin: 10px 0; padding: 10px; border: 1px solid #ccc; width: 80%; display: flex; justify-content: space-around; } .but_page { display: flex; justify-content: center; margin-top: 20px; } .but_page button { padding: 8px 16px; margin: 0 5px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } .but_page button:hover { background-color: royalblue; } .twig { line-height: 35px; margin-left: 10px; } .page_datas { margin-left: 500px; margin-top: 15px; } .seek_box { text-align: center; margin-bottom: 30px; } </style> </head> <body> <!-- 搜索框 --> <div class="seek_box"> <input type="text" /> <button>搜索</button> </div> <!-- 存放数据 --> <div class="data_content"></div> <!-- 底部页码 --> <div class="but_page"></div> <!-- 页码跳转和每页数据 --> <div class="page_datas"> <input type="number" class="href_but" /> <button onclick="buts(-3)">跳转</button> <select name="" class="per_page"> <option value="10">每页10条数据</option> <option value="5">每页5条数据</option> <option value="15">每页15条数据</option> </select> </div> <script> //全局变量 let data; let num = 10; //每页数据 let k = 0; //第几页 let k_all; //一共多少页 // 请求假数据 $.ajax({ type: "GET", url: "js/new_file.json", success: function(res) { data = res; console.log(data); applyColours(0) }, }); // 渲染函数 function applyColours(dat) { k = dat; if (k <= 0) { k = 0; } else if (k >= k_all) { k = k_all - 1; } k_all = Math.ceil(data.length / num); //获取到总共多少页 //渲染内容 let str = ''; for (let i = k * num; i < (k + 1) * num; i++) { if (data[i] == undefined) { break; } str += ` <div class="content_box"> <div>${data[i].id}</div> <div>${data[i].name}</div> <div>${data[i].gender}</div> <div>${data[i].content}</div> <div>${data[i].age}</div> </div>`; } $('.data_content').html(str); //渲染按钮 let std = ``; std += `<button onclick="buts(-1)">上一页</button>` for (let i = 0; i < k_all; i++) { std += `<button onclick="buts(${i})">${i+1}</button>` } std += `<button onclick="buts(-2)">下一页</button>` std += `<div class="twig">共${data.length}条</div>` std += `<div class="twig">共${k_all}页</div>` std += `<div class="twig">当前第${k+1}页</div>` $('.but_page').html(std); $(".but_page button").eq(k + 1).css("background-color", "aquamarine") } // 点击按钮事件 function buts(datas) { if (datas == -1) { applyColours(k - 1); } else if (datas == -2) { applyColours(k + 1); } else if (datas == -3) { let number_value = $('.href_but').val(); console.log(number_value); applyColours(number_value - 1); } else { applyColours(datas) } } // 每页多少条数据 $('.per_page').on('change', function() { let datas_value = $(this).val(); console.log(datas_value); num = datas_value; applyColours(0); }); </script> </body> </html>
