功能样式：
具体实现：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页</title> <style> .box{ margin-left: 20%; width: 60%; } table{ margin: 20px; border: 0.5px solid; } td{ width: 5rem; height: 2rem; text-align: center; border: 0.5px solid; } th{ width: 100%; height: 1.5rem; border: 0.5px solid; } .foot{ margin-left: 25px; width: 90%; display: flex; top: 17rem; } .foot-put input{ width: 12px; height: 12px; } .box0{ display: flex; } .foot-put{ display: flex; margin: 0 10px; } .span{ display: flex; } .foot-put0{ margin: 0px 10px; line-height: 30px; color: cadetblue; } .foot-put0 input{ margin: 0 6px; } .span span{ text-align: center; line-height: 30px; display: inline-block; width: 30px; height: 30px; margin: 0 5px; background-color: aqua; border: 1px solid; border-radius: 10%; } </style> </head> <body> <div class="box"> <table cellspacing = "0"> <thead> <tr> <th colspan="5">↫人物志↬</th> </tr> <tr> <td>♖id</td> <td>♖姓名</td> <td>♖年龄</td> <td>♖身份</td> <td>♖朝代</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>姓名</td> <td>年龄</td> <td>技能</td> <td>学历</td> </tr> </tbody> </table> <div class="foot"> <div class="box0"> <button>上一页</button> <div class="span"> <span onclick="ac(0)">1</span> </div> <button>下一页</button> </div> <div class="foot-put"> <div class="foot-put0"> 到第<input type="text" value="1">页 </div> <button onclick="ao()">确定</button> </div> </div> </div> <script> let tbody = document.getElementsByTagName('tbody')[0]; let input = document.getElementsByTagName('input')[0]; let box0 = document.getElementsByClassName('box0')[0]; let button = box0.getElementsByTagName('button'); let span = document.getElementsByClassName('span')[0]; let num = 5; let k = 0; let data; let s; let xml = new XMLHttpRequest(); xml.open('get','分页.json'); xml.send(); xml.onreadystatechange = function(){ if(xml.readyState == 4 && xml.status == 200){ let text = xml.responseText; data = JSON.parse(text); fn(); } } function fn(){ // let arr = []; s = Math.ceil(data.length / num); let st = ''; for(let i = 0; i < s; i++){ st += '<span onclick="ac('+ i +')">'+ (i+1) +'</span>' } span.innerHTML = st; let str = ''; for(let i = k * num; i < (k+1) * num ; i++){ if(data[i] != undefined){ // arr.push(data[i]); str += "<tr>"+ "<td>"+ data[i].id +"</td>"+ "<td>"+ data[i].name +"</td>"+ "<td>"+ data[i].age +"</td>"+ "<td>"+ data[i].ident +"</td>"+ "<td>"+ data[i].edu +"</td>"+ "</tr>" } } // console.log(arr) // for(let i = 0 ; i < arr.length; i++){ // str += "<tr>"+ // "<td>"+ arr[i].id +"</td>"+ // "<td>"+ arr[i].name +"</td>"+ // "<td>"+ arr[i].age +"</td>"+ // "<td>"+ arr[i].ident +"</td>"+ // "<td>"+ arr[i].edu +"</td>"+ // "</tr>" // } tbody.innerHTML = str; if(k == 0){ button[0].style.backgroundColor = '#fff'; }else{ button[0].style.backgroundColor = ''; } if(k == s-1){ button[1].style.backgroundColor = '#fff'; }else{ button[1].style.backgroundColor = ''; } } button[0].onclick = function(){ if(k > 0){ k--; fn(); } } button[1].onclick = function(){ if(k < s-1){ k++; fn(); } } function ac(a){ k = a; fn(); } function ao(){ let v = k; k = input.value; if(k-1 < s){ k = k-1; fn(); }else{ alert('内容没有那么多') k = v; input.value = 1 ; } } </script> </body> </html>
json数据：
[{ "id" : 1, "name" : "张三", "age" : 25, "ident" : "法外狂徒", "edu" : "中国" },{ "id" : 2, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" },{ "id" : 3, "name" : "王五", "age" : 23, "ident" : "间谍", "edu" : "民国" },{ "id" : 4, "name" : "赵六", "age" : 18, "ident" : "刺客", "edu" : "战国末期" },{ "id" : 5, "name" : "岳飞", "age" : 23, "ident" : "民族英雄", "edu" : "南宋" },{ "id" : 6, "name" : "霍去病", "age" : 23, "ident" : "国家英雄", "edu" : "汉朝" },{ "id" : 7, "name" : "李靖", "age" : 23, "ident" : "军神", "edu" : "唐朝" },{ "id" : 8, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" },{ "id" : 9, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" },{ "id" : 10, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" },{ "id" : 11, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" },{ "id" : 12, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" },{ "id" : 13, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" },{ "id" : 14, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" },{ "id" : 15, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" },{ "id" : 16, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" },{ "id" : 17, "name" : "李四", "age" : 36, "ident" : "乞丐", "edu" : "元末" }]
以上就是本章的全部内容，感谢您的阅读。
