使用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": "坐飞机"
}]
