原生JS利用 Python 生成的数据实现分页功能
本文介绍使用原生 JavaScript 利用 Python 生成的数据实现分页功能，而不是使用 URL 的 page 参数实现分页。
使用原生 JavaScript 利用 Python 生成的数据实现分页功能功能的步骤：
使用Python获取数据库数据，你可能使用 Python 框架或 CMS，该步获取的数据一般是一个一维 list 列表数据，即：list 列表数据中的每个元素是一个数据。 使用基本的 Python 语句将一维list列表转换成二维列表 将二维列表生成html 使用原生 JavaScript 实现分页功能
JS分页效果图
Python中获取数据
利用你的 Python 框架或者 CMS 获取数据，该数据是一个一维的 list 列表，在此我们以一个固定的列表代表在 Python 中获取的数据。
Python 数据内容如下：
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"},
]
Python将一维列表转换成二维列表
利用Python的基本的循环语句实现Python将一维列表转换成二维列表，代码如下：
article_2d = []
cols = 5
rows = 4
row = 0
col = 0
for article in article_1d:
if col == 0:
article_2d.append([])
article_2d[row].append(article)
col += 1
elif col < cols:
article_2d[row].append(article)
col += 1
else:
row += 1
article_2d.append([])
article_2d[row].append(article)
col = 1
关于将一维列表转换成二维列表的详细信息查看：Python将一维列表转换成二维列表
将二维列表生成HTML
本文介绍的方法是使用 Django 的模板语言将二维列表中的每个子列表生成一个div，其基本方法是利用两个for循环处理二维列表：
<div id="pagedArticle" class="paged-article d-flex flex-column">
{% for articles in article_2d %}
{% if forloop.first %}
<div class="pa-pg d-block">
{% else %}
<div class="pa-pg d-none">
{% endif %}
{% for article in articles %}
<div class="d-flex justify-content-between mb-2">
<h3 class="fs-6">{{ title }}</h3>
<p>{{ author }}</p>
</div>
{% endfor %}
</div>
{% endfor %}
<div id="pa-pn" class="pa-pn text-center mt-2">
{% for row in rows %}
{% if forloop.first %}
<i class="mv-pn-num active">{{ row }}</i>
{% else %}
<i class="mv-pn-num">{{ row }}</i>
{% endif %}
{% endfor %}
</div>
</div>
代码解释：
- 默认显示article二维列表中第一个子列表的内容
- 代码中使用了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内的内容。
示例代码如下：
(function() {
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");
});
});
}
})();
总结
本文介绍了使用原生 JavaScript 利用 Python 生成的数据实现分页功能，要实现使用原生JS实现分页功能需要：使用Python获取数据库数据，你可能使用 Python 框架或 CMS，该步获取的数据一般是一个一维 list 列表数据，即：list 列表数据中的每个元素是一个数据；使用基本的 Python 语句将一维list列表转换成二维列表；将二维列表生成html；最后针对生成的html使用原生 JavaScript 实现分页功能。
0 评论