首先我们来看分页这个功能的样式大致是什么样的：
它不仅可以避免页面因数据过多而显得臃肿，还能提升用户浏览数据的效率和体验。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 实现一个功能完备的数据分页系统，涵盖数据的加载、渲染、分页切换以及多种交互操作。
功能概述
我们构建的数据分页系统具备以下主要功能：
- 数据展示：以表格形式展示数据，包括序号、名字、性别、族、住址和出场等信息。
- 分页设置：用户可以通过下拉菜单选择每页显示的数据条数，如 5 条 / 页、10 条 / 页、20 条 / 页、50 条 / 页或 100 条 / 页。
- 页码导航：根据数据总量和每页显示条数自动计算总页码，并展示页码按钮。用户可以点击页码按钮切换到相应页面，当前页码会以不同颜色突出显示。
- 左右翻页：提供 “<” 和 “>” 按钮，用户可以点击进行前后翻页操作，当到达第一页或最后一页时会给出提示。
- 快速跳转：用户可以在输入框中输入页码，按下回车键后跳转到指定页面。若输入的页码无效（如大于总页码、不是整数或小于等于 0），会弹出提示信息告知用户。
代码实现
html：
<table>
<thead>
<tr class="header">
<th>序号</th>
<th>名字</th>
<th>性别</th>
<th>族</th>
<th>住址</th>
<th>出场</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="footer">
<div class="total_page">
</div>
<select name="" id="" style="width: 8%;height: 25px;text-align: center;" onchange="drop_down()">
<option value="5">5条/页</option>
<option value="10">10条/页</option>
<option value="20">20条/页</option>
<option value="50">50条/页</option>
<option value="100">100条/页</option>
</select>
<div class="pageing" onclick="left_ri(1)">
< </div>
<div class="num_page">
</div>
<div class="pageing" onclick="left_ri(2)">
>
</div>
<p>
前往
<input type="text" class="input_tar" />页
</p>
</div>
<script src="js/page.js">
</script>
我这里是用表格写了，大家也可以使用div。
html构建了数据展示和分页操作的基本结构。一个 <table> 元素用于展示数据，其中 <thead> 定义表头信息，<tbody> 初始为空，后续将通过 JavaScript 动态填充数据。在页面底部的 <div> 元素（类名为 footer）中，包含了显示总页码的区域（total_page）、选择每页显示条数的下拉菜单、左右翻页按钮（pageing）、页码按钮区域（num_page）以及用于快速跳转的输入框。
css：
* {
margin: 0;
padding: 0;
}
table {
margin: auto;
width: 90%;
text-align: center;
}
thead {
width: 100%;
height: 40px;
}
tbody {
max-height: 500px;
/* 设置最大高度 */
min-height: 500px;
overflow-y: auto;
/* 溢出时显示垂直滚动条 */
}
.header {
font-size: 18px;
font-weight: 600;
}
td {
width: 16%;
height: 60px;
}
.footer {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
}
.pageing {
width: 2.5%;
height: 26px;
margin-left: 5px;
border-radius: 4px;
text-align: center;
line-height: 24px;
background-color: #d4d3d6;
}
.num_page {
width: 15%;
display: flex;
justify-content: center;
}
.page {
width: 24%;
/* width: 2.5%; */
height: 26px;
margin-left: 5px;
border-radius: 4px;
text-align: center;
line-height: 24px;
background-color: #d4d3d6;
}
.footer p {
width: 10%;
}
.footer input {
width: 42px;
}
CSS 样式主要用于设置表格和分页区域的布局和外观。table 元素居中显示，设置了宽度和文本对齐方式。tbody 元素设置了最大和最小高度，并在内容溢出时显示垂直滚动条。footer 元素作为分页操作区域，设置了宽度、高度和居中对齐方式。各个分页相关的元素，如翻页按钮（pageing）、页码按钮（page）等，都设置了相应的尺寸、边框、背景颜色等样式。
JavaScript：
// 总页码
let page;
// 当前页
let k = 0;
// 数量
let num = 5;
// 全局数据
let data;
let con = document.getElementsByTagName('tbody')[0];
let select_val = document.getElementsByTagName('select')[0];
let total_page = document.getElementsByClassName('total_page')[0];
let page_button = document.getElementsByClassName('num_page')[0];
let xhr = new XMLHttpRequest();
xhr.open('get', 'js/page.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);
render(data);
}
};
// 渲染
function render(data) {
page = Math.ceil(data.length / num);
let str = '';
let sts = '';
let stp = '';
for (let i = k * num; i < (k + 1) * num; i++) {
console.log(k * num, data.length);
if (i > data.length - 1) {
break;
}
str += `
<tr>
<td>${(i+1)*1}</td>
<td>${data[i].name}</td>
<td>${data[i].sex==1?'男':'女'}</td>
<td>${data[i].clan}</td>
<td>${data[i].site}</td>
<td>${data[i].comeON}</td>
</tr>
`;
};
con.innerHTML = str;
sts = `
<span>共${page}页</span>
`;
total_page.innerHTML = sts;
//写个判断，判断当page总页码小于3时，就不用省略，其余情况都需要进行省略
if (page < 3) {
// 在判断中写一个循环，循环总页数
for (let n = 0; n < page; n++) {
// console.log(n);
// 拼接页码的字符串
console.log(n);
//拼接字符串。
stp +=
`<div onclick = "page_click(${n})" class="page" style="background-color:${n == k?'pink':''}";>${n+1}</div>`;
}
page_button.innerHTML = stp;
// 其他情况
} else {
// 首先进行判断，判断k(下标是否小于3)，小于3就只在后边拼接省略号
if (k < 2) {
stp =
`<div onclick = "page_click(${0})" class="page" style="background-color:${k == 0?'pink':''}";>${1}</div>
<div onclick = "page_click(${1})" class="page" style="background-color:${k == 1?'pink':''}";>${2}</div>
<div onclick = "page_click(${2})" class="page" style="background-color:${k == 2?'pink':''}";>${3}</div>
<div class="page" >···</div>`;
} else if (k >= page - 2) {
// 当k大于等于总页码的减2，就只在前面拼接省略号
stp =
`
<div class="page" >···</div>
<div onclick = "page_click(${page-3})" class="page" style="background-color:${k == page -3?'pink':''}";>${page-2}</div>
<div onclick = "page_click(${page-2})" class="page" style="background-color:${k == page-2?'pink':''}";>${page-1}</div>
<div onclick = "page_click(${page-1})" class="page" style="background-color:${k == page-1?'pink':''}";>${page}</div>`;
} else {
// 其余情况两边都拼接省略号
stp =
`
<div class="page" >···</div>
<div onclick = "page_click(${k-1})" class="page">${k}</div>
<div onclick = "page_click(${k})" class="page" style="background-color:pink;">${k+1}</div>
<div onclick = "page_click(${k+1})" class="page">${k+2}</div>
<div class="page" >···</div>
`;
}
page_button.innerHTML = stp;
}
}
// 下拉框
function drop_down() {
k = 0;
num = select_val.value;
render(data);
}
// 输入框
let input_tar = document.getElementsByClassName('input_tar')[0];
input_tar.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
// 回车键被按下时执行的逻辑
if (input_tar.value > page || input_tar.value % 1 != 0 || Number(input_tar.value) <= 0) {
alert('暂无');
return;
}
k = input_tar.value - 1;
}
render(data);
});
// 页码的点击
function page_click(index) {
k = index;
console.log(data);
console.log(num);
render(data);
}
function left_ri(index) {
if (index == 1) {
if (k == 0) {
alert('不能再点了哦');
return;
}
k--;
} else if (index == 2) {
if (k == page-1) {
alert('不能再点了哦');
return;
}
k++;
}
render(data);
}
代码解释
- 数据加载：使用
XMLHttpRequest对象从js/page.json文件中获取数据。当数据获取成功、时，将数据解析为 JavaScript 对象并存储在data变量中，然后调用render函数进行数据渲染。 - 渲染函数
render：- 首先计算总页码
page，通过Math.ceil(data.length / num)得到，即数据总量除以每页显示条数并向上取整（避免小数）。 - 遍历当前页的数据，生成包含序号、名字、性别等信息的表格行 HTML 字符串，并将其赋值给
<tbody>的innerHTML，实现数据的展示。 - 生成显示总页码的 HTML 字符串，并赋值给
total_page元素。 - 根据总页码和当前页的情况，生成页码按钮的 HTML 字符串。当总页码小于 3 时，直接展示所有页码按钮；当总页码大于等于 3 时，根据当前页的位置，合理展示部分页码按钮并添加省略号，以避免页码按钮过多导致界面混乱。最后将生成的页码按钮 HTML 字符串赋值给
page_button元素。
- 首先计算总页码
- 下拉框函数
drop_down：当用户选择下拉菜单中的每页显示条数时，将当前页k重置为 0（让当前页回到第一页），更新每页显示条数num，然后调用render函数重新渲染数据。 - 输入框事件处理：为输入框添加
keydown事件监听器，当用户按下回车键时，检查输入的页码是否有效（大于总页码、不是整数或小于等于 0）。若无效，弹出提示信息；若有效，更新当前页k，然后调用render函数跳转到指定页面。 - 页码点击函数
page_click：当用户点击页码按钮时，更新当前页k为点击的页码索引，然后调用render函数切换到相应页面。 - 左右翻页函数
left_ri：根据传入的参数index判断是向左翻页（index == 1）还是向右翻页（index == 2）。在翻页前检查是否到达第一页或最后一页，若到达则给出提示；否则更新当前页k，然后调用render函数实现翻页。
通过以上的 HTML、CSS 和 JavaScript 代码，我们成功实现了一个功能全面的数据分页功能。这个系统展示了如何运用前端技术处理数据的获取、展示和分页交互，为用户提供了良好的浏览体验。
扫一扫
7582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
