一. HTML 部分代码及代码解释
本节包括 HTML 页面构造和代码。
1.1 HTML 页面构造
HTML 页面分为三个部分，分别是:
- <table> 标签包裹的表格部分，表格内容由 JavaScript 页面加载出来。
- <div> 标签包裹的换页部分，控制页面切换。
- <label> 标签包裹的 select 下拉框，下拉框中出现的数字为列表加载数量。
1.2 图片使用的建议
图片在网站上传带水印，暂时不会去掉，大家将就着用，用其他的图片也是可以的。图片只起到一个标记作用，所以不必纠结。
图片名字和引用：
<img src="Previous.png" οnclick="previous()" alt="上一页的图片">
<img src="next.png" οnclick="next()" alt="下一页的图片">
复制代码时，使用自己图片的话，记得保持图片名字一致。
1.3 代码部分
HTML 部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 表格渲染部分 -->
<table id="table">
</table>
<!-- 换页部分 -->
<div class="bottom">
<img src="Previous.png" onclick="previous()" alt="上一页的图片">
<div id="page" class="page">
1
</div>
<img src="next.png" onclick="next()" alt="下一页的图片">
</div>
<!-- 加载页面中数据量 -->
<label for="fenYe">
下次加载
<select name="fenYe" id="fenYe">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
条数据
</label>
</body>
<script type="text/javascript" src="index.js"></script>
</html>二. CSS 部分代码及代码解释
CSS 代码部分根据作业喜好方式设置的，代码实现是没问题的。如果感觉不合适的话，可以自己调动成自己喜欢的样式。
2.1 代码部分解释
border-collapse 属性是用来决定表格的边框是分开的还是合并的。
border-collapse: collapse;
相邻的单元格共用同一条边框。
border-collapse: separate;
每个单元格拥有独立的边框。（默认值）
border-collapse: separate;
border-collapse: collapse;
vertical-align: 属性设置元素垂直方向的对齐方式。
vertical-align:middle； 把此元素放置在父元素的中部。
vertical-align:top； 把元素的顶端与行中最高元素的顶端对齐 。
vertical-align:bottom； 把元素的顶端与行中最低的元素的顶端对齐。
2.2 代码部分
CSS 样式设计的极为简单，大家可以根据自己的喜好更改。
table{
width: 100%;
border-collapse: collapse;
}
table caption{
font-size: 2em;
font-weight: bold;
margin: 1em 0;
}
th,td{
border: 1px solid #999;
text-align: center;
padding: 20px 0;
}
/* ----------------------------------------分隔符---------------------------------------- */
.bottom{
width: 100%;
text-align: center;
}
img{
width: 50px;
height: 50px;
vertical-align: middle;/* 水平对齐 */
}
.page{
display: inline-block;
font-size:50px;
padding: 0;
vertical-align: middle;
}
/* ----------------------------------------分隔符---------------------------------------- */
三. JS 部分代码及代码解释
3.1 代码逻辑
- 自定义数据
- 获取数据
- 获取当前页面分页部分数据
- 获取 select 下拉框值
- 获取在此页面中数据最多能加载几页
- 渲染数据
-
没有使用事件监听功能
-
判断页面显示数据量是否切换
-
生成数据
-
- 定义切换页面函数，通过给图片添加点击事件实现。
- 加载生成数据的函数
3.2 函数解析
Math.ceil() :向上舍入，并返回大于等于给定数字的最小整数。
console.log(Math.ceil(0.5));
// 输出结果： 1console.log(Math.ceil(2));
// 输出结果： 2console.log(Math.ceil(6.05));
//输出结果： 7console.log(Math.ceil(-1.004));
// 输出结果： : -1
3.3 代码部分
// 自定义数据
let dataList = [
{
title: "标题1",
content: "内容1",
},
{
title: "标题2",
content: "内容2",
},
{
title: "标题3",
content: "内容3",
},
{
title: "标题4",
content: "内容4",
},
{
title: "标题5",
content: "内容5",
},
{
title: "标题6",
content: "内容6",
},
{
title: "标题7",
content: "内容7",
},
{
title: "标题8",
content: "内容8",
},
{
title: "标题9",
content: "内容9",
},
{
title: "标题10",
content: "内容10",
},
{
title: "标题11",
content: "内容11",
},
{
title: "标题12",
content: "内容12",
},
{
title: "标题13",
content: "内容13",
},
{
title: "标题14",
content: "内容14",
},
{
title: "标题15",
content: "内容15",
},
{
title: "标题16",
content: "内容16",
},
{
title: "标题17",
content: "内容17",
},
{
title: "标题18",
content: "内容18",
},
{
title: "标题19",
content: "内容19",
},
{
title: "标题20",
content: "内容20",
},
{
title: "标题21",
content: "内容21",
},
{
title: "标题22",
content: "内容22",
},
{
title: "标题23",
content: "内容23",
},
{
title: "标题24",
content: "内容24",
},
];
// 获取 id 为 page 的内容，也就是两个箭头中间部分
let page = document.getElementById("page")
// 获取下拉框中的数据
let selectNumber = Number(document.getElementById("fenYe").value)
pageNumber = (page.innerText - 1) * selectNumber
// 总页数
// ceil 想上取整的函数 例如 Math.ceil(0.1) === 1
let sumPage = Math.ceil(dataList.length / selectNumber)
// 函数功能：前往上一页
function previous(){
// 获取此时该页面是第几页
let testNum = page.innerText
if(testNum > 1){
page.innerText = page.innerText -1
pageNumber = (page.innerText - 1) * selectNumber
document.getElementById("table").innerHTML = ""
loading(pageNumber)
}else{
alert("已经是第一页")
}
}
// 函数功能：前往下一页
function next(){
// 获取此时该页面是第几页
let testNum = document.getElementById("page").innerText
sumPage = Math.ceil(dataList.length / selectNumber)
console.log(testNum,sumPage)
if(testNum < sumPage){
page.innerText = Number(testNum) + 1
pageNumber = (document.getElementById("page").innerText - 1) * selectNumber
document.getElementById("table").innerHTML = ""
loading(pageNumber)
}else{
alert("已经是最后一页")
}
}
/*渲染数据*/
function loading(pageNumber){
// 没有使用事件监听功能
let nowSelectNumber = Number(document.getElementById("fenYe").value)
// 判断页面显示数据量是否切换
if(nowSelectNumber !== selectNumber){
selectNumber = nowSelectNumber
pageNumber = 0
page.innerText = 1
}
// 获取到表格，对表格表头和总标题进行定义
let table = document.getElementById("table")
let caption = document.createElement("caption")
let tr = document.createElement("tr")
let firstTh = document.createElement("th")
let secondTh = document.createElement("th")
// 对定义的数据赋值
caption.innerText = "数据表(总标题)"
firstTh.innerText = "标题"
secondTh.innerText = "内容"
// 将定义的数据添加到合适的位置
table.appendChild(caption)
table.appendChild(tr)
tr.appendChild(firstTh)
tr.appendChild(secondTh)
// 渲染数据
for (let i = pageNumber; i < pageNumber + selectNumber; i++) {
if(i === dataList.length){
break;
}
let table = document.getElementById("table");
let tr = document.createElement("tr");
let tdTitle = document.createElement("td");
let tdContent = document.createElement("td");
tdTitle.innerText = dataList[i].title;
tdContent.innerText = dataList[i].content;
tr.appendChild(tdTitle);
tr.appendChild(tdContent);
table.appendChild(tr);
console.log(pageNumber)
}
}
loading(pageNumber);四.成果展示
五.注意事项
数据是作者批量生成的，等到大家真正开发项目的时候。这些数据后端都会写好传递过来，我们写好自己的代码逻辑就好。
本文中没有使用事件监听器，大家感兴趣的话可以自己添加或者改动。
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
