网站 友情链接怎么做/seo专业培训学费多少钱

前言

在前端开发中，分页功能是一个常见的需求，特别是当需要展示大量数据时，它能有效提升用户体验。该文章结合运用了HTML，CSS，JS实现网页的分页按钮功能，并且可以选择每页显示的条数试试更新总页数及显示当前页和总数据条数。

代码整体功能概述

这段代码实现了一个简单的网页，从 JSON 文件中获取数据并以表格形式展示，同时提供分页功能。用户可以通过点击分页按钮、输入页码或者选择每页显示条数来浏览不同页面的数据。

效果展示

 代码部分

HTML

<div class="content"><table><thead><tr><td>id</td><td>姓名</td><td>年龄</td><td>性别</td></tr></thead><tbody><tr><td>111</td><td>222</td><td>333</td><td></td></tr></tbody></table>
</div><div class="box"></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.变量声明及数据获取部分

1. 变量声明：定义了 data 用于存储从 JSON 文件获取的数据，pageSize 表示每页显示的记录数，selfPage 记录当前页码，totalPages 表示总页数。
2. XMLHttpRequest 对象：使用 XMLHttpRequest 来获取 ./js/pages.json 文件的数据。open 方法设置请求方法为 GET，并指定异步请求。send 方法发送请求。
3. 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.页面渲染函数

1. 计算总页数：使用 Math.ceil(data.length / pageSize) 计算总页数，向上取整以确保所有数据都能展示。
2. 拼接表格内容：通过循环根据当前页码和每页显示条数，从 data 中提取相应数据并拼接成 HTML 表格行，设置为表格 tbody 的内容。
3. 拼接分页按钮：
   • 首先拼接当前页码、数据范围、每页显示条数选择框以及首页和上一页按钮。
   • 根据总页数和当前页码的不同情况，生成不同样式的分页按钮。总页数小于 6 时，直接生成所有页码按钮；总页数大于 6 时，根据当前页在前 3 页、后 3 页或中间部分，生成相应的部分页码按钮并加上省略号。
   • 最后拼接前往指定页输入框、下一页和尾页按钮。
4. 更新页面元素：将拼接好的分页按钮 HTML 代码插入到 .box 容器中，并设置下拉框的当前选中值为 pageSize。

function render(data) {// 计算总页数//总页数=数据的长度×每页显示的条数，并且向上取整totalPages = Math.ceil(data.length / pageSize);console.log(totalPages);// 内容字符串,后续往里面拼内容let textStr = '';//selfPage=0，pageSize=5，0×5=0;（0+1）×5=5for (let i = selfPage * pageSize; i < (selfPage + 1) * pageSize; i++) {//因为上面的for循环条件的原因，所以加一个判断//代表到最后一条数据了，就停止循环if (i > data.length - 1) {break;}// 拼接data中的name，age，sex数据textStr += `<tr><td>${[i+1]}</td><td>${data[i].name}</td><td>${data[i].age}</td><td>${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 class="NO">${selfPage + 1}</span>页</div> <div >当前页是第<span class="start">${startPage}</span>条-第<span class="end">${endPage}</span>条,共${data.length}条数据</div><select id="show" onchange="selectNum()"><option value="5">5条/页</option><option value="10">10条/页</option><option value="20">20条/页</option></select><div class="homePage" onclick="firstPage()">首页</div><div class="lastPage" onclick="lastPage()">上一页</div>`;// 分页按钮的逻辑// 如果总页数小于6的话就生成简单的分页按钮if (totalPages < 6) {for (let i = 0; i < totalPages; i++) {// 当用户点击时.会调用targetPage函数并传i(当前生成的分页按钮所代表的页码)//		三元判断：如果当前页和i相等就变色butStr += `<div class="pageNum" onclick="targetPage(${i})"${selfPage === i? 'style="background-color:gray;"' : ''}>${i + 1}</div>`;}// 否则就是大于6页} else {// 当前页是前3页的话，就生成前3页和后续页的，分页按钮if (selfPage < 3) {butStr += `<div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div><div class="pageNum" onclick="targetPage(${1})" ${selfPage === 1? 'style="background-color:gray;"' : ''}>2</div><div class="pageNum" onclick="targetPage(${2})" ${selfPage === 2? 'style="background-color:gray;"' : ''}>3</div><div class="pageNum" onclick="targetPage(${3})">4</div><div class="pageNum" onclick="targetPage(${4})">5</div>...<div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>`;// 当前页是最后3页的话，就生成后3页和前面部分页的按钮（在11页点12页的时候，会把14页也渲染出来）} else if (selfPage >= totalPages - 3) {// 事件传参为总页数-5,但是显示的页数时总页数-4,// 少一个是因为传参是数组:从0开始。而显示页数是butStr += ` <div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div>...<div class="pageNum" onclick="targetPage(${totalPages - 5})">${totalPages - 4}</div><div class="pageNum" onclick="targetPage(${totalPages - 4})">${totalPages - 3}</div><div class="pageNum" onclick="targetPage(${totalPages - 3})"${selfPage === totalPages - 3? 'style="background-color:gray;"' : ''}>${totalPages - 2}</div><div class="pageNum" onclick="targetPage(${totalPages - 2})"${selfPage === totalPages - 2? 'style="background-color:gray;"' : ''}>${totalPages - 1}</div><div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>`;//当前页是中间（4 - 18页）的话，就生成前和后几页的分页按钮（点第4页会显示后面的第6页）} else {butStr += `<div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div>...<div class="pageNum" onclick="targetPage(${selfPage - 2})">${selfPage - 1}</div><div class="pageNum" onclick="targetPage(${selfPage - 1})">${selfPage}</div><div class="pageNum" onclick="targetPage(${selfPage})" style="background-color:gray">${selfPage + 1}</div><div class="pageNum" onclick="targetPage(${selfPage + 1})">${selfPage + 2}</div><div class="pageNum" onclick="targetPage(${selfPage + 2})">${selfPage + 3}</div>...<div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>`;}}// 底部分页的后半部分butStr += `前往<input type="number" class="pages" placeholder="请输入页数">页<div class="nextPage" onclick="nextPage()">下一页</div><div class="endPage" onclick="endPage()">尾页</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 = '';//selfPage=0，pageSize=5，0×5=0;（0+1）×5=5for (let i = selfPage * pageSize; i < (selfPage + 1) * pageSize; i++) {//因为上面的for循环条件的原因，所以加一个判断//代表到最后一条数据了，就停止循环if (i > data.length - 1) {break;}// 拼接data中的name，age，sex数据textStr += `<tr><td>${[i+1]}</td><td>${data[i].name}</td><td>${data[i].age}</td><td>${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 class="NO">${selfPage + 1}</span>页</div> <div >当前页是第<span class="start">${startPage}</span>条-第<span class="end">${endPage}</span>条,共${data.length}条数据</div><select id="show" onchange="selectNum()"><option value="5">5条/页</option><option value="10">10条/页</option><option value="20">20条/页</option></select><div class="homePage" onclick="firstPage()">首页</div><div class="lastPage" onclick="lastPage()">上一页</div>`;// 分页按钮的逻辑// 如果总页数小于6的话就生成简单的分页按钮if (totalPages < 6) {for (let i = 0; i < totalPages; i++) {// 当用户点击时.会调用targetPage函数并传i(当前生成的分页按钮所代表的页码)//		三元判断：如果当前页和i相等就变色butStr +=`<div class="pageNum" onclick="targetPage(${i})"${selfPage === i? 'style="background-color:gray;"' : ''}>${i + 1}</div>`;}// 否则就是大于6页} else {// 当前页是前3页的话，就生成前3页和后续页的，分页按钮if (selfPage < 3) {butStr +=`<div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div><div class="pageNum" onclick="targetPage(${1})" ${selfPage === 1? 'style="background-color:gray;"' : ''}>2</div><div class="pageNum" onclick="targetPage(${2})" ${selfPage === 2? 'style="background-color:gray;"' : ''}>3</div><div class="pageNum" onclick="targetPage(${3})">4</div><div class="pageNum" onclick="targetPage(${4})">5</div>...<div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>`;// 当前页是最后3页的话，就生成后3页和前面部分页的按钮（在11页点12页的时候，会把14页也渲染出来）} else if (selfPage >= totalPages - 3) {// 事件传参为总页数-5,但是显示的页数时总页数-4,// 少一个是因为传参是数组:从0开始。而显示页数是butStr +=` <div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div>...<div class="pageNum" onclick="targetPage(${totalPages - 5})">${totalPages - 4}</div><div class="pageNum" onclick="targetPage(${totalPages - 4})">${totalPages - 3}</div><div class="pageNum" onclick="targetPage(${totalPages - 3})"${selfPage === totalPages - 3? 'style="background-color:gray;"' : ''}>${totalPages - 2}</div><div class="pageNum" onclick="targetPage(${totalPages - 2})"${selfPage === totalPages - 2? 'style="background-color:gray;"' : ''}>${totalPages - 1}</div><div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>`;//当前页是中间（4-18页）的话，就生成前和后几页的分页按钮（点第4页会显示后面的第6页）} else {butStr += `<div class="pageNum" onclick="targetPage(${0})" ${selfPage === 0? 'style="background-color:gray;"' : ''}>1</div>...<div class="pageNum" onclick="targetPage(${selfPage - 2})">${selfPage - 1}</div><div class="pageNum" onclick="targetPage(${selfPage - 1})">${selfPage}</div><div class="pageNum" onclick="targetPage(${selfPage})" style="background-color:gray">${selfPage + 1}</div><div class="pageNum" onclick="targetPage(${selfPage + 1})">${selfPage + 2}</div><div class="pageNum" onclick="targetPage(${selfPage + 2})">${selfPage + 3}</div>...<div class="pageNum" onclick="targetPage(${totalPages - 1})"${selfPage === totalPages - 1? 'style="background-color:gray;"' : ''}>${totalPages}</div>`;}}// 底部分页的后半部分butStr += `前往<input type="number" class="pages" placeholder="请输入页数">页<div class="nextPage" onclick="nextPage()">下一页</div><div class="endPage" onclick="endPage()">尾页</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": "男"
}]