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条有点小小的毛病哪位大神给找一下发我呢感谢
