使用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": "坐飞机"
}]
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
