HTML结构这一部分自己想怎么写怎么写
<body> <div class="billboard"> </div> <div class="table_box"> <table class="serial"> <thead> <tr> <td>Serial Number</td> <td>name</td> <td>age</td> <td>motto</td> </tr> </thead> <tbody> </tbody> </table> </div> <div class="box"> </div> <script src="./js/paging.js"></script> </body>
我这里JS用的外联，代码马上呈现给兄弟们！
let data; // 用于存储从服务器获取的数据 let num = 5; // 每页显示的条目数 let k = 0; // 当前页数，初始化为0 let page; let i; let totalPages; let endPage; let xhr = new XMLHttpRequest(); // 创建一个新的 XMLHttpRequest 对象 // 设置请求方式和请求地址发送 GET 请求，请求的地址为 './js/paging.json'，true 表示异步请求 xhr.open('get', './js/paging.json', true); // 发送请求 xhr.send(); // 接收返回的响应数据 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // 将从服务器返回的 JSON 数据解析为 JavaScript 对象，并赋值给 data 变量 data = JSON.parse(xhr.responseText); // 调用展示数据的函数 show，并传入获取的数据作为参数 show(data); console.log(data); } }; // 修改 show(data) 函数和相关部分 function show(data) { totalPages = Math.ceil(data.length / num); // 总页数 // 计算显示页码的范围 // if (totalPages <= 4) { // startPage = 0; // endPage = totalPages - 1; // } else { // if (k <= 2) { // 当前页码在前3页 // startPage = 0; // endPage = 3; // } else if (k >= totalPages - 3) { // 当前页码在后3页 // startPage = totalPages - 4; // endPage = totalPages - 1; // } else { // 当前页码在中间部分 // startPage = k - 1; // endPage = k + 1; // } // } // 生成数据表格 let str = ''; let sti = ``; for (let i = k * num; i < (k + 1) * num; i++) { if (data[i] == undefined) break; str += `<tr> <td>${i + 1}</td> <td>${data[i].name}</td> <td>${data[i].age}</td> <td>${data[i].motto}</td> </tr>`; } // 生成分页控件 sti = ` <div>第${k + 1}页</div> || <div>共${data.length}条数据</div> <select id="show" onchange="selects()"> <option>${num}条/页</option> <option value="5">5条/页</option> <option value="10">10条/页</option> <option value="20">20条/页</option> </select> <div class="homepage" onclick="end_page()">首页</div> <div class="homepage" onclick="pages()">上一页</div>`; if (totalPages < 6) { for (k = 0; k < totalPages; k++) { sti += `<div class="borders" onclick="clickreat(${k})">${k + 1}</div>`; } } else { if (k < 3) { sti += `<div class="tail_page" onclick="next(${0})" ${k == 0 ? 'style="background-color:pink;"' : '""'}>${1}</div> <div class="tail_page" onclick="next(${1})" ${k == 1 ? 'style="background-color:pink;";' : '"'} >${2}</div> <div class="tail_page" onclick="next(${2})" ${k == 2 ? 'style="background-color:pink;";' : '"'}>${3}</div> <div class="tail_page" onclick="next(${3})" ${k == 3 ? 'style="background-color:pink;";' : '"'}>${4}</div> <div class="tail_page" onclick="next(${4})" ${k == 4 ? 'style="background-color:pink;";' : '"'}>${5}</div>...`; } else if (k > totalPages - 4) { sti += `...<div class="tail_page" onclick="next(${totalPages - 5})" ${k == totalPages - 5 ? 'style="background-color:pink;";' : '"'}>${totalPages - 4}</div> <div class="tail_page" onclick="next(${totalPages - 4})" ${k == totalPages - 4 ? 'style="background-color:pink;";' : '"'}>${totalPages - 3}</div> <div class="tail_page" onclick="next(${totalPages - 3})" ${k == totalPages - 3 ? 'style="background-color:pink;";' : '"'}>${totalPages - 2}</div> <div class="tail_page" onclick="next(${totalPages - 2})" ${k == totalPages - 2 ? 'style="background-color:pink;";' : '"'}>${totalPages - 1}</div> <div class="tail_page" onclick="next(${totalPages - 1})" ${k == totalPages - 1 ? 'style="background-color:pink;";' : '"'}>${totalPages}</div>`; } else { sti += `...<div class="tail_page" onclick="sort(${k - 2})" >${k - 1}</div> <div class="tail_page" onclick="next(${k - 1})">${k}</div> <div class="tail_page" onclick="next(${k})" style="background:pink">${k + 1}</div> <div class="tail_page" onclick="next(${k + 1})">${k + 2}</div> <div class="tail_page" onclick="next(${k + 2})">${k + 3}</div>...`; } } sti += ` 前往<input type="text" class="butoo">页 <div class="tail_page" onclick="next()">下一页</div> <div class="tail_page" onclick="trailer()">尾页</div> `; // 更新页面内容 document.getElementsByTagName('tbody')[0].innerHTML = str; document.getElementsByClassName('box')[0].innerHTML = sti; } // 点击页码按钮跳转函数 function clickreat(index) { k = index; show(data); } // 下一页函数 function next() { // 已经到最后一页 不执行任何操作 if (k == totalPages - 1) { alert('已经到底啦'); } else { k++; console.log(k); // 显示下一页数据 } show(data); } // 上一页函数 function pages() { k--; if (k < 0) { k = 0; // 如果已经是第一页，则保持在第一页 alert("已经是第一页啦"); } console.log(k); // 显示上一页数据 show(data); } // 调回首页 function end_page() { k = 0; show(data) } // 尾页 function trailer() { k = totalPages - 1; show(data) // console.log(totalPages); } // 键盘事件，按下回车跳转指定页 document.addEventListener("keydown", function (e) { if (e.key === "Enter") { // 获取输入框的值并去除首尾空格 let value = document.getElementsByClassName('butoo')[0].value.trim(); // 检查输入的值是否为有效的整数 if (Number.isInteger(Number(value)) && parseInt(value) > 0 && parseInt(value) <= totalPages) { k = parseInt(value) - 1; // 设置跳转页数 从0开始 show(data); // 显示指定页数据 } else { alert("请输入有效的页码数！"); // 提示输入无效页码 // 清空输入框内容或者恢复到之前的有效选项 } // document.getElementsByClassName('butoo')[0].value = ''; } }); // select下拉框事件，改变每页显示条目数 function selects() { k = 0; let value = document.getElementById('show').value; // 更新每页显示条目数 num = value; // 重新计算总页数 totalPages = Math.ceil(data.length / num); show(data); }
显示多条数据那里20条有点小小的毛病哪位大神给找一下发我呢感谢
