网站突然不被百度收录,做网站引流,可视化开源cms,大连百度推广哪家好前言
在前端开发中#xff0c;分页功能是一个常见的需求#xff0c;特别是当需要展示大量数据时#xff0c;它能有效提升用户体验。该文章结合运用了HTML#xff0c;CSS#xff0c;JS实现网页的分页按钮功能#xff0c;并且可以选择每页显示的条数试试更新总页数及显示当…前言
在前端开发中分页功能是一个常见的需求特别是当需要展示大量数据时它能有效提升用户体验。该文章结合运用了HTMLCSSJS实现网页的分页按钮功能并且可以选择每页显示的条数试试更新总页数及显示当前页和总数据条数。 代码整体功能概述
这段代码实现了一个简单的网页从 JSON 文件中获取数据并以表格形式展示同时提供分页功能。用户可以通过点击分页按钮、输入页码或者选择每页显示条数来浏览不同页面的数据。 效果展示 代码部分
HTML
div classcontenttabletheadtrtdid/tdtd姓名/tdtd年龄/tdtd性别/td/tr/theadtbodytrtd111/tdtd222/tdtd333/tdtd/td/tr/tbody/table
/divdiv classbox/div
CSS部分
.box {position: fixed;left: 23%;top: 35%;/* border: solid; */width: 55%;/* background-color: aqua; */display: flex;justify-content: space-around;}.box input {width: 70px;}.pageNum {width: 20px;height: 22px;text-align: center;font-weight: 600;cursor: pointer;border: solid 1px;border-radius: 5px;}.endPage,.lastPage,.nextPage,.homePage {cursor: pointer;}.pageNum:hover {background-color: gray;/* 鼠标悬浮时的背景颜色 */color: white;/* 鼠标悬浮时的文本颜色 */}.endPage:hover,.lastPage:hover,.nextPage:hover,.homePage:hover {color: red;}table {margin: auto;border: solid;text-align: center;border-collapse: collapse;width: 280px;}th,td {padding: 10px;border: 1px solid black;/* 为表格、表头和单元格添加 1px 黑色实线边框 */}.content {/* background-color: darkgray; *//* width: 305px; */margin: auto;max-height: 265px;overflow: auto;}thead {height: 55px;position: sticky;top: 0;background-color: white;/* 可根据需要修改表头背景颜色 */z-index: 1;/* 确保表头在滚动时显示在内容之上 */}.start,.end ,.NO{color: red;font-weight: 600;}
JS部分
1.变量声明及数据获取部分
变量声明定义了 data 用于存储从 JSON 文件获取的数据pageSize 表示每页显示的记录数selfPage 记录当前页码totalPages 表示总页数。XMLHttpRequest 对象使用 XMLHttpRequest 来获取 ./js/pages.json 文件的数据。open 方法设置请求方法为 GET并指定异步请求。send 方法发送请求。onreadystatechange 事件处理当 readyState 变为 4表示请求已完成且 status 为 200表示请求成功时将响应文本解析为 JSON 格式并存储到 data 中然后调用 render 函数渲染页面。
let data;
// 每页显示5条
let pageSize 5;
// 当前页
let selfPage 0;
// 总页数
let totalPages;
let xhr new XMLHttpRequest();
xhr.open(get, ./js/pages.json, true);
xhr.send();
xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {let text xhr.responseText;data JSON.parse(text);render(data); // 数据加载成功后渲染页面console.log(data);}
};
2.页面渲染函数
计算总页数使用 Math.ceil(data.length / pageSize) 计算总页数向上取整以确保所有数据都能展示。拼接表格内容通过循环根据当前页码和每页显示条数从 data 中提取相应数据并拼接成 HTML 表格行设置为表格 tbody 的内容。拼接分页按钮 首先拼接当前页码、数据范围、每页显示条数选择框以及首页和上一页按钮。根据总页数和当前页码的不同情况生成不同样式的分页按钮。总页数小于 6 时直接生成所有页码按钮总页数大于 6 时根据当前页在前 3 页、后 3 页或中间部分生成相应的部分页码按钮并加上省略号。最后拼接前往指定页输入框、下一页和尾页按钮。 更新页面元素将拼接好的分页按钮 HTML 代码插入到 .box 容器中并设置下拉框的当前选中值为 pageSize。
function render(data) {// 计算总页数//总页数数据的长度×每页显示的条数并且向上取整totalPages Math.ceil(data.length / pageSize);console.log(totalPages);// 内容字符串,后续往里面拼内容let textStr ;//selfPage0pageSize50×50;01×55for (let i selfPage * pageSize; i (selfPage 1) * pageSize; i) {//因为上面的for循环条件的原因所以加一个判断//代表到最后一条数据了就停止循环if (i data.length - 1) {break;}// 拼接data中的nameagesex数据textStr trtd${[i1]}/tdtd${data[i].name}/tdtd${data[i].age}/tdtd${data[i].sex}/td/tr;}//把拼接好的字符串放到tbody里document.getElementsByTagName(tbody)[0].innerHTML textStr;// 计算当前页开始和结束的数据编号let startPage selfPage * pageSize 1;let endPage Math.min((selfPage 1) * pageSize, data.length);// 按钮字符串后续往里拼分页部分let butStr ;// value 表示当用户选择该选项时该选项所代表的实际值butStr div第span classNO${selfPage 1}/span页/div div 当前页是第span classstart${startPage}/span条-第span classend${endPage}/span条,共${data.length}条数据/divselect idshow onchangeselectNum()option value55条/页/optionoption value1010条/页/optionoption value2020条/页/option/selectdiv classhomePage onclickfirstPage()首页/divdiv classlastPage onclicklastPage()上一页/div;// 分页按钮的逻辑// 如果总页数小于6的话就生成简单的分页按钮if (totalPages 6) {for (let i 0; i totalPages; i) {// 当用户点击时.会调用targetPage函数并传i(当前生成的分页按钮所代表的页码)// 三元判断如果当前页和i相等就变色butStr div classpageNum onclicktargetPage(${i})${selfPage i? stylebackground-color:gray; : }${i 1}/div;}// 否则就是大于6页} else {// 当前页是前3页的话就生成前3页和后续页的分页按钮if (selfPage 3) {butStr div classpageNum onclicktargetPage(${0}) ${selfPage 0? stylebackground-color:gray; : }1/divdiv classpageNum onclicktargetPage(${1}) ${selfPage 1? stylebackground-color:gray; : }2/divdiv classpageNum onclicktargetPage(${2}) ${selfPage 2? stylebackground-color:gray; : }3/divdiv classpageNum onclicktargetPage(${3})4/divdiv classpageNum onclicktargetPage(${4})5/div...div classpageNum onclicktargetPage(${totalPages - 1})${selfPage totalPages - 1? stylebackground-color:gray; : }${totalPages}/div;// 当前页是最后3页的话就生成后3页和前面部分页的按钮在11页点12页的时候会把14页也渲染出来} else if (selfPage totalPages - 3) {// 事件传参为总页数-5,但是显示的页数时总页数-4,// 少一个是因为传参是数组:从0开始。而显示页数是butStr div classpageNum onclicktargetPage(${0}) ${selfPage 0? stylebackground-color:gray; : }1/div...div classpageNum onclicktargetPage(${totalPages - 5})${totalPages - 4}/divdiv classpageNum onclicktargetPage(${totalPages - 4})${totalPages - 3}/divdiv classpageNum onclicktargetPage(${totalPages - 3})${selfPage totalPages - 3? stylebackground-color:gray; : }${totalPages - 2}/divdiv classpageNum onclicktargetPage(${totalPages - 2})${selfPage totalPages - 2? stylebackground-color:gray; : }${totalPages - 1}/divdiv classpageNum onclicktargetPage(${totalPages - 1})${selfPage totalPages - 1? stylebackground-color:gray; : }${totalPages}/div;//当前页是中间4 - 18页的话就生成前和后几页的分页按钮点第4页会显示后面的第6页} else {butStr div classpageNum onclicktargetPage(${0}) ${selfPage 0? stylebackground-color:gray; : }1/div...div classpageNum onclicktargetPage(${selfPage - 2})${selfPage - 1}/divdiv classpageNum onclicktargetPage(${selfPage - 1})${selfPage}/divdiv classpageNum onclicktargetPage(${selfPage}) stylebackground-color:gray${selfPage 1}/divdiv classpageNum onclicktargetPage(${selfPage 1})${selfPage 2}/divdiv classpageNum onclicktargetPage(${selfPage 2})${selfPage 3}/div...div classpageNum onclicktargetPage(${totalPages - 1})${selfPage totalPages - 1? stylebackground-color:gray; : }${totalPages}/div;}}// 底部分页的后半部分butStr 前往input typenumber classpages placeholder请输入页数页div classnextPage onclicknextPage()下一页/divdiv classendPage onclickendPage()尾页/div;// console.log(butStr);//把拼好的分页按钮放到分页的容器里document.getElementsByClassName(box)[0].innerHTML butStr;// 更新下拉框的选中状态点一页显示多少条数据后会跟着变document.getElementById(show).value pageSize;
}
3.分页操作函数
当用户点击分页按钮时调用将当前页码 selfPage 设置为点击的页码 index然后调用 render 函数重新渲染页面展示对应页码的数据。
function targetPage(index) {//下标等于当前页selfPage index;// 重新调用渲染函数更新一下页面render(data);
}
4.下一页函数
点击下一页按钮时调用检查当前页是否为最后一页若是则提示用户否则将当前页码 selfPage 加 1再调用 render 函数更新页面。
function nextPage() {// 如果当前是最后一页的话 就不能在下了if (selfPage totalPages - 1) {alert(我是有底线的);// 当前页到第二页} else {selfPage;}// 重新调用渲染函数更新一下页面render(data);
}
5.上一页函数
点击上一页按钮时调用检查当前页是否小于 0防止越界若是则设为第一页并提示用户否则将当前页码 selfPage 减 1然后调用 render 函数更新页面。
function lastPage() {if (selfPage 0) {selfPage 0;alert(这就是第一页);} else {// 当前页--selfPage--;}render(data);
}
6.首页函数
点击首页按钮时调用将当前页码 selfPage 设为 0然后调用 render 函数重新渲染页面显示第一页的数据。
function firstPage() {// 让当前页等于0并重新渲染函数更新页面即可selfPage 0;render(data);
}
7.尾页函数
点击尾页按钮时调用将当前页码 selfPage 设为总页数减 1然后调用 render 函数重新渲染页面显示最后一页的数据。
function endPage() {//让当前页等于总页数totalPages - 1的最后一页selfPage totalPages - 1;render(data);
}
8.键盘事件下拉框
监听文档的 keydown 事件当用户按下回车键时获取输入框的值。检查输入值是否为有效页码整数且在合理范围内若是则更新当前页码并调用 render 函数否则提示用户输入有效数字。最后清空输入框。
document.addEventListener(keydown, function(e) {// 检查用户按下的是否为回车键if (e.key Enter) {// 获取input框里的值let value document.getElementsByClassName(pages)[0].value.trim();//增加判断条件//1. 先将value转为数字Number,在使用Number.isInteget检查是否为整数// 2.并且把value转为整数(parsInt)并且大于0,防止输入负数// 3.并且把value转为整数(parsInt)并且小于等于总页数,防止输入超过页数的数if (Number.isInteger(Number(value)) parseInt(value) 0 parseInt(value) totalPages) {// 令当前页为 转为整数的value-1(因为页是从0开始的,输入的数值是从1开始的.所以-1才更合理)selfPage parseInt(value) - 1;render(data);} else {alert(请输入有效数字);}// 回车后清空输入框里的值document.getElementsByClassName(pages)[0].value ;}
});
9.下拉框处理事件
当下拉框的值改变时调用将当前页码 selfPage 设为 0获取下拉框选择的每页显示条数并更新 pageSize重新计算总页数后调用 render 函数以新的每页显示条数展示数据。
function selectNum() {//令当前页为0,方便按顺序展示数据selfPage 0;//获取下拉框里的值let value document.getElementById(show).value;//把这个值赋给显示的页数pageSize value;//重新计算总页数数据长度×现实的页数就是总长度,并向下取整totalPages Math.ceil(data.length / pageSize);render(data);
}
JS总览
let data;// 每页显示5条let pageSize 5;// 当前页let selfPage 0;// 总页数let totalPages;let xhr new XMLHttpRequest();xhr.open(get, ./js/pages.json, true);xhr.send();xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {let text xhr.responseText;data JSON.parse(text);render(data); // 数据加载成功后渲染页面console.log(data);}};function render(data) {// 计算总页数//总页数数据的长度×每页显示的条数并且向上取整totalPages Math.ceil(data.length / pageSize);console.log(totalPages);// 内容字符串,后续往里面拼内容let textStr ;//selfPage0pageSize50×50;01×55for (let i selfPage * pageSize; i (selfPage 1) * pageSize; i) {//因为上面的for循环条件的原因所以加一个判断//代表到最后一条数据了就停止循环if (i data.length - 1) {break;}// 拼接data中的nameagesex数据textStr trtd${[i1]}/tdtd${data[i].name}/tdtd${data[i].age}/tdtd${data[i].sex}/td/tr;}//把拼接好的字符串放到tbody里document.getElementsByTagName(tbody)[0].innerHTML textStr;// 计算当前页开始和结束的数据编号let startPage selfPage * pageSize 1;let endPage Math.min((selfPage 1) * pageSize, data.length);// 按钮字符串后续往里拼分页部分let butStr ;// value 表示当用户选择该选项时该选项所代表的实际值butStr div第span classNO${selfPage 1}/span页/div div 当前页是第span classstart${startPage}/span条-第span classend${endPage}/span条,共${data.length}条数据/divselect idshow onchangeselectNum()option value55条/页/optionoption value1010条/页/optionoption value2020条/页/option/selectdiv classhomePage onclickfirstPage()首页/divdiv classlastPage onclicklastPage()上一页/div;// 分页按钮的逻辑// 如果总页数小于6的话就生成简单的分页按钮if (totalPages 6) {for (let i 0; i totalPages; i) {// 当用户点击时.会调用targetPage函数并传i(当前生成的分页按钮所代表的页码)// 三元判断如果当前页和i相等就变色butStr div classpageNum onclicktargetPage(${i})${selfPage i? stylebackground-color:gray; : }${i 1}/div;}// 否则就是大于6页} else {// 当前页是前3页的话就生成前3页和后续页的分页按钮if (selfPage 3) {butStr div classpageNum onclicktargetPage(${0}) ${selfPage 0? stylebackground-color:gray; : }1/divdiv classpageNum onclicktargetPage(${1}) ${selfPage 1? stylebackground-color:gray; : }2/divdiv classpageNum onclicktargetPage(${2}) ${selfPage 2? stylebackground-color:gray; : }3/divdiv classpageNum onclicktargetPage(${3})4/divdiv classpageNum onclicktargetPage(${4})5/div...div classpageNum onclicktargetPage(${totalPages - 1})${selfPage totalPages - 1? stylebackground-color:gray; : }${totalPages}/div;// 当前页是最后3页的话就生成后3页和前面部分页的按钮在11页点12页的时候会把14页也渲染出来} else if (selfPage totalPages - 3) {// 事件传参为总页数-5,但是显示的页数时总页数-4,// 少一个是因为传参是数组:从0开始。而显示页数是butStr div classpageNum onclicktargetPage(${0}) ${selfPage 0? stylebackground-color:gray; : }1/div...div classpageNum onclicktargetPage(${totalPages - 5})${totalPages - 4}/divdiv classpageNum onclicktargetPage(${totalPages - 4})${totalPages - 3}/divdiv classpageNum onclicktargetPage(${totalPages - 3})${selfPage totalPages - 3? stylebackground-color:gray; : }${totalPages - 2}/divdiv classpageNum onclicktargetPage(${totalPages - 2})${selfPage totalPages - 2? stylebackground-color:gray; : }${totalPages - 1}/divdiv classpageNum onclicktargetPage(${totalPages - 1})${selfPage totalPages - 1? stylebackground-color:gray; : }${totalPages}/div;//当前页是中间4-18页的话就生成前和后几页的分页按钮点第4页会显示后面的第6页} else {butStr div classpageNum onclicktargetPage(${0}) ${selfPage 0? stylebackground-color:gray; : }1/div...div classpageNum onclicktargetPage(${selfPage - 2})${selfPage - 1}/divdiv classpageNum onclicktargetPage(${selfPage - 1})${selfPage}/divdiv classpageNum onclicktargetPage(${selfPage}) stylebackground-color:gray${selfPage 1}/divdiv classpageNum onclicktargetPage(${selfPage 1})${selfPage 2}/divdiv classpageNum onclicktargetPage(${selfPage 2})${selfPage 3}/div...div classpageNum onclicktargetPage(${totalPages - 1})${selfPage totalPages - 1? stylebackground-color:gray; : }${totalPages}/div;}}// 底部分页的后半部分butStr 前往input typenumber classpages placeholder请输入页数页div classnextPage onclicknextPage()下一页/divdiv classendPage onclickendPage()尾页/div;// console.log(butStr);//把拼好的分页按钮放到分页的容器里document.getElementsByClassName(box)[0].innerHTML butStr;// 更新下拉框的选中状态点一页显示多少条数据后会跟着变document.getElementById(show).value pageSize;}// 点击页码跳转页面// 在拼接字符串里每一个分页按钮上都绑定了function targetPage(index) {//下标等于当前页selfPage index;// 重新调用渲染函数更新一下页面render(data);}// 下一页function nextPage() {// 如果当前是最后一页的话 就不能在下了if (selfPage totalPages - 1) {alert(我是有底线的);// 当前页到第二页} else {selfPage;}// 重新调用渲染函数更新一下页面render(data);}// 上一页,和下一页逻辑一样function lastPage() {if (selfPage 0) {selfPage 0;alert(这就是第一页);} else {// 当前页--selfPage--;}render(data);}// 首页function firstPage() {// 让当前页等于0并重新渲染函数更新页面即可selfPage 0;render(data);}// 尾页function endPage() {//让当前页等于总页数totalPages - 1的最后一页selfPage totalPages - 1;render(data);}//回车跳转// 给整个文档上事件监听键盘事件document.addEventListener(keydown, function(e) {// 检查用户按下的是否为回车键if (e.key Enter) {// 获取input框里的值let value document.getElementsByClassName(pages)[0].value.trim();//增加判断条件//1. 先将value转为数字Number,在使用Number.isInteget检查是否为整数// 2.并且把value转为整数(parsInt)并且大于0,防止输入负数// 3.并且把value转为整数(parsInt)并且小于等于总页数,防止输入超过页数的数if (Number.isInteger(Number(value)) parseInt(value) 0 parseInt(value) totalPages) {// 令当前页为 转为整数的value-1(因为页是从0开始的,输入的数值是从1开始的.所以-1才更合理)selfPage parseInt(value) - 1;render(data);} else {alert(请输入有效数字);}// 回车后清空输入框里的值document.getElementsByClassName(pages)[0].value ;}});//下拉框的onchange事件function selectNum() {//令当前页为0,方便按顺序展示数据selfPage 0;//获取下拉框里的值let value document.getElementById(show).value;//把这个值赋给显示的页数pageSize value;//重新计算总页数数据长度×现实的页数就是总长度,并向下取整totalPages Math.ceil(data.length / pageSize);render(data);}
JSON数据
[{name: 杨过,age: 20,sex: 男
}, {name: 小龙女,age: 19,sex: 女
}, {name: 黄飞鸿,age: 22,sex: 男
}, {name: 蔡徐坤,age: 19,sex: 男
}, {name: 刘德华,age: 19,sex: 男
}, {name: 塞罗,age: 1999,sex: 男
}, {name: 迪迦,age: 2222,sex: 男
}, {name: 神仙,age: 8888,sex: 女
}, {name: 神仙,age: 9999,sex: 男
}, {name: 张三,age: 19,sex: 男
}, {name: 李四,age: 20,sex: 男
}, {name: 王五,age: 21,sex: 男
}, {name: 赵六,age: 22,sex: 男
}, {name: 杨好滴,age: 20,sex: 女
}, {name: 郑数据,age: 19,sex: 女
}, {name: 李氏含,age: 22,sex: 男
}, {name: 张刹车,age: 19,sex: 男
}, {name: 汉斯里,age: 20,sex: 女
}, {name: 黄思敏,age: 19,sex: 女
}, {name: 彭于晏,age: 22,sex: 男
}, {name: 黑鹿,age: 19,sex: 男
}, {name: 杨过,age: 20,sex: 女
}, {name: 小龙女,age: 19,sex: 女
}, {name: 黄飞鸿,age: 22,sex: 男
}, {name: 蔡徐坤,age: 19,sex: 男
}, {name: 杨过,age: 20,sex: 女
}, {name: 小龙女,age: 19,sex: 女
}, {name: 黄飞鸿,age: 22,sex: 男
}, {name: 蔡徐坤,age: 19,sex: 男
}, {name: 杨过,age: 20,sex: 女
}, {name: 小龙女,age: 19,sex: 女
}, {name: 黄飞鸿,age: 22,sex: 男
}, {name: 蔡徐坤,age: 19,sex: 男
}, {name: 杨过,age: 20,sex: 女
}, {name: 小龙女,age: 19,sex: 女
}, {name: 杨过,age: 20,sex: 女
}, {name: 小龙女,age: 19,sex: 女
}, {name: 黄飞鸿,age: 22,sex: 男
}, {name: 蔡徐坤,age: 19,sex: 男
}, {name: 刘德华,age: 19,sex: 男
}, {name: 塞罗,age: 1999,sex: 男
}, {name: 迪迦,age: 2222,sex: 男
}, {name: 奥特之母,age: 8888,sex: 女
}, {name: 神仙,age: 9999,sex: 男
}, {name: 张三,age: 19,sex: 男
}, {name: 李四,age: 20,sex: 男
}, {name: 王五,age: 21,sex: 男
}, {name: 赵六,age: 22,sex: 男
}, {name: 杨好滴,age: 20,sex: 女
}, {name: 郑数据,age: 19,sex: 女
}, {name: 李氏含,age: 22,sex: 男
}, {name: 张刹车,age: 19,sex: 男
}, {name: 汉斯里,age: 20,sex: 女
}, {name: 黄思敏,age: 19,sex: 女
}, {name: 彭于晏,age: 22,sex: 男
}, {name: 黑鹿,age: 19,sex: 男
}, {name: 杨过,age: 20,sex: 女
}, {name: 小龙女,age: 19,sex: 女
}, {name: 黄飞鸿,age: 22,sex: 男
}, {name: 蔡徐坤,age: 19,sex: 男
}, {name: 杨过,age: 20,sex: 女
}, {name: 车座子,age: 19,sex: 女
}, {name: 黄飞鸿,age: 22,sex: 男
}, {name: 蔡徐坤,age: 19,sex: 男
}, {name: 杨过,age: 20,sex: 女
}, {name: 小龙女,age: 19,sex: 女
}, {name: 黄飞鸿,age: 22,sex: 男
}]
