原生JS实现分页功能完整代码(包含处理数据生成HTML)
本文介绍使用原生 JavaScript 实现分页功能完整代码（包含处理数据生成HTML），而不是使用 URL 的 page 参数实现分页。
使用原生 JS 实现分页功能的步骤：
- 定义一个数组作为后端返回的数据
- 将JS一维数组转换为二维数组
- 使用原生JS将二维列表生成HTML
- 使用原生JS实现分页功能
JS分页效果图
JS中定义一维数组数据
在HTML文件的<script></script>标记内添加一维数组数据，注意：<script>标记要在</body>标记的前面，因为需要等待<body>加载完成，再操作HTML元素。
JS数组数据如下：
article_1d = [
{"title": "PhpStorm破解版下载", "author": "anxin"},
{"title": "原生JS实现分页功能", "author": "anxin"},
{"title": "WebStorm破解版下载", "author": "anxin"},
{"title": "IntelliJ IDEA破解版下载", "author": "anxin"},
{"title": "JavaScript为HTML元素删除CSS", "author": "anxin"},
{"title": "JavaScript为HTML元素添加CSS", "author": "anxin"},
{"title": "Markdown代码中进行缩进和换行", "author": "anxin"},
{"title": "Javascript为元素添加事件监听器", "author": "anxin"},
{"title": "Pycharm Pro破解版下载", "author": "anxin"},
{"title": "GoLand破解版下载", "author": "anxin"},
{"title": "RubyMine破解版下载", "author": "anxin"},
{"title": "Adobe Acrobat Pro破解版下载", "author": "anxin"},
{"title": "DataSpell破解版下载", "author": "anxin"},
{"title": "Adobe XD CC破解版下载", "author": "anxin"},
{"title": "Rider破解版下载", "author": "anxin"},
{"title": "网站内容如何使必应快速收录：向Bing提交链接", "author": "anxin"},
{"title": "网站内容如何使百度快速收录：向百度提交链接 ", "author": "anxin"},
{"title": "FreeBSD 13使用PIP包安装 Let's Encrypt Certbot为Apache启用Https", "author": "anxin"},
{"title": "Ubuntu 如何安装KDE Plasma桌面环境", "author": "anxin"},
{"title": "网站中使用本地文件加载Font Awesome 6字体图标", "author": "anxin"},
]
将JS一维数组转换为二维数组
利用JS数组的forEach()函数遍历一维数组内的每个元素，使JS实现一维数组对象转换二维数组。
代码：
var article_2d = []
const cols = 5
var row = 0
var col = 0
article_1d.forEach((item) => {
if (col == 0) {
article_2d.push([]);
article_2d.at(row).push(item);
col += 1;
} else if (col < cols) {
article_2d.at(row).push(item)
col += 1
} else {
row += 1;
article_2d.push([])
article_2d.at(row).push(item)
col = 1
}
});
关于JS实现一维对象数组转换二维数组的详细信息查看：JS实现一维对象数组转换二维数组
将二维数组生成HTML
利用JS数组的forEach()函数遍历数组内的每个元素，处理JS二维数组内的所有元素。利用JS操作DOM的函数生成HTML。
代码：
// 把二维数组内的数据生成HTML
var pagedArticleElement = document.createElement('div');
pagedArticleElement.setAttribute('id', 'pagedArticle');
pagedArticleElement.setAttribute('class', 'paged-article container d-flex flex-column p-5');
document.body.appendChild(pagedArticleElement);
article_2d.forEach((item, idx, arr) => {
let pgElement = document.createElement('div');
if (idx == 0) {
pgElement.setAttribute('class', 'pa-pg d-block');
} else {
pgElement.setAttribute('class', 'pa-pg d-none');
}
pagedArticleElement.appendChild(pgElement);
item.forEach((innerItem) => {
let aElement = document.createElement('div');
aElement.setAttribute('class', 'd-flex justify-content-between mb-2');
aElement.innerHTML = "<h3 className=\"fs-6\">" + innerItem.title + "</h3><p>" + innerItem.author + "</p>";
pgElement.appendChild(aElement);
});
});
// 添加页码
var paginationElement = document.createElement('div');
paginationElement.setAttribute('id', 'pa-pn');
paginationElement.setAttribute('class', 'pa-pn text-center mt-2')
pagedArticleElement.appendChild(paginationElement);
for (let i=1; i<=rows; i++) {
let pElement = document.createElement('i');
if (i==1) {
pElement.setAttribute('class', 'pa-pn-num active');
}
else {
pElement.setAttribute('class', 'pa-pn-num');
}
pElement.innerHTML = i;
paginationElement.appendChild(pElement);
}
代码解释：
pagedArticleElement为创建的最外层的div，为该div添加属性，并添加到<body>标记中article_2d.forEach循环是嵌套的循环，外层的循环是创建代表一个分页的div，内层的循环是添加该页面内的文章列表。- 代码中使用了Boostrap的CSS
- "添加页码"部分是创建分页的序号
本例中使用的自定义的CSS代码：
.pa-pn-num {
cursor: pointer;
font-size: 16px;
font-style: normal;
margin: 0 5px;
display: inline-block;
text-align: center;
height: 28px;
line-height: 28px;
width: 28px;
border: 1px solid #222;
border-radius: 17px;
background: #222;
color: #fff;
}
.pa-pn-num:hover {
background: #f4645f;
border: 0;
}
.pa-pn-num.active, .pa-pn-num.active:hover {
background: #fff;
color: #222;
border: 1px solid #222;
}
使用原生JS实现分页功能
HTML已经生成，只需实现当点击分页的页码时，显示对应的<div class="pa-pg“>内的内容（所有的<div class="pa-pg“>元素相当于一个数组，其在数组中下标与页码所对应），隐藏其他div内的内容。
示例代码如下：
const pagedArticle = document.getElementById('pa-pn');
if (pagedArticle) {
pagedArticle.querySelectorAll('.pa-pn-num').forEach((item) => {
item.addEventListener('click', event => {
const p_num = parseInt(event.currentTarget.textContent) - 1;
document.querySelectorAll('#pagedArticle .pa-pg').forEach((item, idx, arr) => {
if (idx == p_num) {
item.classList.remove('d-none');
item.classList.add('d-block');
}
else {
item.classList.remove('d-block');
item.classList.add('d-none');
}
});
pagedArticle.querySelectorAll('.pa-pn-num').forEach((item) => {
item.classList.remove("active");
});
event.currentTarget.classList.add("active");
});
});
}
JS分页完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/5.3.1/css/bootstrap.min.css">
<title>JS分页完整代码</title>
<style>
.custom-padding {
padding: 50px 200px;
}
.pa-pn-num {
cursor: pointer;
font-size: 16px;
font-style: normal;
margin: 0 5px;
display: inline-block;
text-align: center;
height: 28px;
line-height: 28px;
width: 28px;
border: 1px solid #222;
border-radius: 17px;
background: #222;
color: #fff;
}
.pa-pn-num:hover {
background: #f4645f;
border: 0;
}
.pa-pn-num.active, .pa-pn-num.active:hover {
background: #fff;
color: #222;
border: 1px solid #222;
}
</style>
</head>
<body>
<script>
const article_1d = [
{"title": "PhpStorm破解版下载", "author": "anxin"},
{"title": "原生JS实现分页功能", "author": "anxin"},
{"title": "WebStorm破解版下载", "author": "anxin"},
{"title": "IntelliJ IDEA破解版下载", "author": "anxin"},
{"title": "JavaScript为HTML元素删除CSS", "author": "anxin"},
{"title": "JavaScript为HTML元素添加CSS", "author": "anxin"},
{"title": "Markdown代码中进行缩进和换行", "author": "anxin"},
{"title": "Javascript为元素添加事件监听器", "author": "anxin"},
{"title": "Pycharm Pro破解版下载", "author": "anxin"},
{"title": "GoLand破解版下载", "author": "anxin"},
{"title": "RubyMine破解版下载", "author": "anxin"},
{"title": "Adobe Acrobat Pro破解版下载", "author": "anxin"},
{"title": "DataSpell破解版下载", "author": "anxin"},
{"title": "Adobe XD CC破解版下载", "author": "anxin"},
{"title": "Rider破解版下载", "author": "anxin"},
{"title": "网站内容如何使必应快速收录：向Bing提交链接", "author": "anxin"},
{"title": "网站内容如何使百度快速收录：向百度提交链接 ", "author": "anxin"},
{"title": "FreeBSD 13使用PIP包安装 Let's Encrypt Certbot为Apache启用Https", "author": "anxin"},
{"title": "Ubuntu 如何安装KDE Plasma桌面环境", "author": "anxin"},
{"title": "网站中使用本地文件加载Font Awesome 6字体图标", "author": "anxin"},
]
var article_2d = []
const cols = 5
const rows = 4
var row = 0
var col = 0
article_1d.forEach((item) => {
if (col == 0) {
article_2d.push([]);
article_2d.at(row).push(item);
col += 1;
} else if (col < cols) {
article_2d.at(row).push(item)
col += 1
} else {
row += 1;
article_2d.push([])
article_2d.at(row).push(item)
col = 1
}
});
// 把二维数组内的数据生成HTML
var pagedArticleElement = document.createElement('div');
pagedArticleElement.setAttribute('id', 'pagedArticle');
pagedArticleElement.setAttribute('class', 'paged-article container d-flex flex-column custom-padding');
document.body.appendChild(pagedArticleElement);
article_2d.forEach((item, idx, arr) => {
let pgElement = document.createElement('div');
if (idx == 0) {
pgElement.setAttribute('class', 'pa-pg d-block');
} else {
pgElement.setAttribute('class', 'pa-pg d-none');
}
pagedArticleElement.appendChild(pgElement);
item.forEach((innerItem) => {
let aElement = document.createElement('div');
aElement.setAttribute('class', 'd-flex justify-content-between mb-2');
aElement.innerHTML = "<h3 className=\"fs-6\">" + innerItem.title + "</h3><p>" + innerItem.author + "</p>";
pgElement.appendChild(aElement);
});
});
// 添加页码
var paginationElement = document.createElement('div');
paginationElement.setAttribute('id', 'pa-pn');
paginationElement.setAttribute('class', 'pa-pn text-center mt-2')
pagedArticleElement.appendChild(paginationElement);
for (let i=1; i<=rows; i++) {
let pElement = document.createElement('i');
if (i==1) {
pElement.setAttribute('class', 'pa-pn-num active');
}
else {
pElement.setAttribute('class', 'pa-pn-num');
}
pElement.innerHTML = i;
paginationElement.appendChild(pElement);
}
const pagedArticle = document.getElementById('pa-pn');
if (pagedArticle) {
pagedArticle.querySelectorAll('.pa-pn-num').forEach((item) => {
item.addEventListener('click', event => {
const p_num = parseInt(event.currentTarget.textContent) - 1;
document.querySelectorAll('#pagedArticle .pa-pg').forEach((item, idx, arr) => {
if (idx == p_num) {
item.classList.remove('d-none');
item.classList.add('d-block');
}
else {
item.classList.remove('d-block');
item.classList.add('d-none');
}
});
pagedArticle.querySelectorAll('.pa-pn-num').forEach((item) => {
item.classList.remove("active");
});
event.currentTarget.classList.add("active");
});
});
}
</script>
</body>
</html>
总结
本文介绍了使用原生 JavaScript 实现分页功能，实现分页从最开始的将JS一维数组转换为二维数组，然后再使用原生JS将二维列表生成HTML，最后使用原生JS实现分页功能。该文章包含了JS实现分页完整代码，以供学习使用。
0 评论