使用HTML，css，js和json假数据制作分页功能。
以下为分页功能结构，下面可以点击上一页，下一页及数字，还可以自己输入想要跳转的页面点击跳转。下面每页显示的内容也会跟着改变。还可以选择不同的每页显示数据的条数。默认为每页五条数据。
HTML结构：
<body> <table border="1px" style=text-align="center" cellpadding="10" cellspacing="0"> <thead> <tr> <th class="caption">姓名</td> <th class="caption">年龄</td> <th class="caption">性别</td> <th class="caption">爱好</td> </tr> </thead> <tbody> <tr class="content"> <!-- <td>123</td> <td>123</td> <td>123</td> <td>123</td> --> </tr> </tbody> </table> <!-- 上一页 --> <div class="page"> <div class="prev">上一页</div> <p class="num">1</p> <div class="prev">下一页</div> <input class="Afew" /> <div class="tar">跳转</div> </div> <!-- 显示几条数据 --> <div class="footer"> <p>显示第</p> <p class="first">x</p> <p>到第</p> <p class="second">x</p> <p>条数据;</p> <p>总共</p> <p class="all">x</p> <p>条数据;</p> <select class="selects"> <option style="border: 1px #e9e9de;" value="5" class="option">每页5条</option> <option value="10">每页10条</option> <option value="15">每页15条</option> <option value="20">每页20条</option> <option value="30">每页30条</option> </select> <p>数据</p> </div> <!-- 提示框 --> <div class="prompt"> <div class="prompt_text"></div> </div> <script src="js/paging.js"></script> </body>
css样式：
<style> * { margin: 0; padding: 0; } .caption { text-align: center; width: 140px; height: 50px; } td { width: 140px; height: 50px; text-align: center; } .page { display: flex; margin-top: 10px; } .prev { width: 80px; height: 40px; text-align: center; line-height: 40px; background-color: #FAFAFA; border: 1px solid #adadad; } .num { width: 40px; height: 40px; text-align: center; line-height: 40px; background-color: #FAFAFA; border: 1px solid #adadad; } .Afew { width: 60px; height: 40px; border: 1px solid #adadad; margin-left: 10px; } .tar { width: 60px; height: 40px; text-align: center; line-height: 40px; background-color: #FAFAFA; border: 1px solid #adadad; margin-left: 10px; } .footer { display: flex; flex-wrap: nowrap; margin-top: 10px; margin-bottom: 20px; } .first { width: 20px; text-align: center; } .second { width: 20px; text-align: center; } .all { width: 20px; text-align: center; } .selects { margin-left: 10px; } .prompt { width: 180px; height: 80px; border: 1px solid #ffaa00; background-color: blanchedalmond; border-radius: 10px; position: fixed; top: 0; left: 15%; display: none; } .prompt_text { font-size: 16px; text-align: center; line-height: 80px; } </style>
js部分：
// 分页功能 // data总数据 let data; // 总页码 let count_pages; let xhr = new XMLHttpRequest(); xhr.open('get', 'js/paging.json', true); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { let text = xhr.responseText; // console.log(text); data = JSON.parse(text); console.log(data); item(data); } }; // 当前所在页面 初始值在第一页 let k = 0; // 每页显示多少条 初始值为五条 let nums = 5; function item(data) { // 计算总页面数量 count_pages = Math.ceil(data.length / nums); // console.log(count_pages); // 总数据 let str = ''; // 页码 let strs = ''; // 遍历数组 for (let i = k * nums; i < (k + 1) * nums; i++) { if (data[i] == undefined) { break; } // console.log(data); // 拼接数据内容 str += ` <tr class="content"> <td>${data[i].name}</td> <td>${data[i].age}</td> <td>${data[i].gender}</td> <td>${data[i].hobby}</td> </tr>`; }; strs += ` <div class="prev" onclick="previous()">上一页</div>`; for (let i = 0; i < count_pages; i++) { // 渲染页码 使用三元表达式给选中的变颜色 strs += `<p class="num" onclick="target_pages(${i})" ${k == i?'style="background-color:#ffff7f"':''}>${i+1}</p>`; }; strs += `<div class="prev" onclick="down()">下一页</div> <input class="Afew" /> <div class="tar" onclick="skip()">跳转</div>`; // 显示的第一个数字 页面×页面的条数 $(".first").html(k * nums + 1); $(".second").html((k + 1) * nums > data.length ? data.length : (k + 1) * nums); // 显示总数据 $(".all").html(data.length); $("tbody").html(str); $(".page").html(strs); }; // 上一页的点击事件 function previous() { // console.log(111); if (k > 0) { k--; // 调用渲染数据 item(data); } else { $(".prompt").show(); $(".prompt_text").html('已经是第一页'); setTimeout(function() { $(".prompt").hide(); }, 1500); } }; // 数字点击事件 function target_pages(i) { console.log(i + 1); k = i; $(".num").css("background-color", "#ffff7f"); $(".num").css("background-color", "#FFFFFF"); item(data); }; // 下一页点击事件 function down() { // k小于总页码 if (k < count_pages - 1) { // console.log(k < count_pages); k++; item(data); } else { // 提示框 $(".prompt").show(); $(".prompt_text").html('已经是最后一页'); setTimeout(function() { $(".prompt").hide(); }, 1500); } }; // 点击数字跳转相应页面 function skip() { let inp = document.getElementsByClassName('Afew')[0].value; console.log(inp); // 判断输入框不为空 提示请输入跳转的页码 if (inp == '') { // 提示框 $(".prompt").show(); $(".prompt_text").html('请输入要跳转的页码'); setTimeout(function() { $(".prompt").hide(); }, 1500); // 判断输入框大于总页码时 提示没有此页码 } else if (inp > count_pages) { // 提示框 $(".prompt").show(); $(".prompt_text").html('没有此页码'); setTimeout(function() { $(".prompt").hide(); }, 1000); // 判断输入框内的值不为小数 不为负数和0 } else if (inp % 1 != 0 || inp <= 0) { $(".prompt").show(); $(".prompt_text").html('请输入正确页码数'); setTimeout(function() { $(".prompt").hide(); }, 1000); // 否则就跳转 } else { k = inp - 1; }; item(data); }; // 点击下拉框 根据内容渲染页面数据 // 获取下拉框 给下拉框添加 let selects = document.getElementsByClassName('selects')[0]; selects.addEventListener("change", function() { //重新赋值 nums = this.value; // 获取现在有的页码 count_pages = Math.ceil(data.length / nums); // 判断k是否大于总页码 if (k > count_pages - 1) { k = count_pages - 1; }; item(data); });
json假数据部分，使用数组包对象的方式，共有33条数据：
[{ "name": "刘小巍", "age": 8, "gender": "女", "hobby": "拍视频" }, { "name": "娄小慧", "age": 20, "gender": "女", "hobby": "刷视频" }, { "name": "聂小博", "age": 16, "gender": "女", "hobby": "听歌" }, { "name": "赵小康", "age": 29, "gender": "男", "hobby": "研究" }, { "name": "张小铭", "age": 17, "gender": "男", "hobby": "爱追番" }, { "name": "超超", "age": 60, "gender": "男", "hobby": "武术" }, { "name": "董小珊", "age": 23, "gender": "女", "hobby": "看电视" }, { "name": "张小俊", "age": 35, "gender": "男", "hobby": "打火影" }, { "name": "煎饼果子", "age": 50, "gender": "女", "hobby": "打电话" }, { "name": "新疆炒米粉", "age": 80, "gender": "女", "hobby": "吹牛" }, { "name": "楼小梦", "age": 66, "gender": "女", "hobby": "看电影" }, { "name": "娄小明", "age": 19, "gender": "男", "hobby": "旅游 滑雪" }, { "name": "娄小文", "age": 25, "gender": "女", "hobby": "做饭" }, { "name": "小马", "age": 10, "gender": "男", "hobby": "跑步" }, { "name": "冯小轩", "age": 66, "gender": "男", "hobby": "打篮球" }, { "name": "囡囡", "age": 2, "gender": "女", "hobby": "吃罐头" }, { "name": "墨墨", "age": 2, "gender": "男", "hobby": "打羽毛球" }, { "name": "汤圆", "age": 4, "gender": "女", "hobby": "睡觉" }, { "name": "沐沐", "age": 3, "gender": "女", "hobby": "撒花" }, { "name": "小橘", "age": 1, "gender": "男", "hobby": "吃冻干" }, { "name": "kitty", "age": 12, "gender": "女", "hobby": "跳绳" }, { "name": "孟小雨", "age": 42, "gender": "男", "hobby": "撸猫" }, { "name": "赵小乐", "age": 13, "gender": "男", "hobby": "读诗" }, { "name": "张晓兰", "age": 71, "gender": "女", "hobby": "泡温泉" }, { "name": "李洵", "age": 21, "gender": "男", "hobby": "冒险" }, { "name": "高丽珠", "age": 90, "gender": "男", "hobby": "吹笛子" }, { "name": "李金梅", "age": 38, "gender": "女", "hobby": "弹钢琴" }, { "name": "蓟娇然", "age": 75, "gender": "男", "hobby": "游泳" }, { "name": "池思洁", "age": 1, "gender": "男", "hobby": "拍照片" }, { "name": "沈欣瑶", "age": 41, "gender": "女", "hobby": "工作" }, { "name": "谭碧灵", "age": 52, "gender": "男", "hobby": "踢足球" }, { "name": "权天恩", "age": 62, "gender": "女", "hobby": "猜字谜" }, { "name": "谷兰娟", "age": 70, "gender": "女", "hobby": "坐飞机" }]
