JavaScript 中的简单分页
Anika Tabassum Era
2023年1月30日
2022年5月10日
在 JavaScript 中，我们经常定义我们首选的函数范围来提取某些活动。JavaScript 中的分页可以通过多个函数的组合手动编写脚本。
我们将演示如何创建分页以从一个页面浏览到另一个页面。我们将创建基本的分页函数来操作它，我们还将看到另一个使用 jquery 插件 pagination.js 的示例，这将使我们的编码体验更轻松。
自定义分页功能对网页进行分页
我们将首先声明包含我们数据的对象。下一步是计算每个数据以及我们希望在一页上预览多少。在此过程中，我们还将获得网页上的总页数。
在 totNumPages 函数计算出我们的总页数之后，我们将创建基础函数来点击 prev 和 next。
让我们检查代码块以有一个清晰的概念。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="TableList"></div>
<a href="javascript:prevPage()" id="btn_prev">Prev</a>
<a href="javascript:nextPage()" id="btn_next">Next</a><br>
page: <span id="page"></span>
</body>
</html>
var obj = [
{ number: "Number 1"},
{ number: "Number 2"},
{ number: "Number 3"},
{ number: "Number 4"},
{ number: "Number 5"},
{ number: "Number 6"},
{ number: "Number 7"},
{ number: "Number 8"},
{ number: "Number 9"},
{ number: "Number 10"},
{ number: "Number 11"},
{ number: "Number 12"},
{ number: "Number 13"},
{ number: "Number 14"},
{ number: "Number 15"}
];
var current_page = 1;
var obj_per_page = 3;
function totNumPages()
{
return Math.ceil(obj.length / obj_per_page);
}
function prevPage()
{
if (current_page > 1) {
current_page--;
change(current_page);
}
}
function nextPage()
{
if (current_page < totNumPages()) {
current_page++;
change(current_page);
}
}
function change(page)
{
var btn_next = document.getElementById("btn_next");
var btn_prev = document.getElementById("btn_prev");
var listing_table = document.getElementById("TableList");
var page_span = document.getElementById("page");
if (page < 1) page = 1;
if (page > totNumPages()) page = totNumPages();
listing_table.innerHTML = "";
for (var i = (page-1) * obj_per_page; i < (page * obj_per_page); i++) {
listing_table.innerHTML += obj[i].number + "<br>";
}
page_span.innerHTML = page;
if (page == 1) {
btn_prev.style.visibility = "hidden";
} else {
btn_prev.style.visibility = "visible";
}
if (page == totNumPages()) {
btn_next.style.visibility = "hidden";
} else {
btn_next.style.visibility = "visible";
}
}
window.onload = function() {
change(1);
};
输出：
在这种情况下，change 函数在可视化导航和每页对象限制方面起着至关重要的作用。此外，第一页和最后一页上的 prev 和 next 可点击项的可见性。每当页面加载和任何重新加载后，默认页面设置为 page 1。
使用 Jquery 插件 pagination.js 在网页上冲浪
Jquery 插件使在网页中实现分页变得更加容易。你需要在 header 部分为插件添加 CDN，轻松导入预定义的约定来处理分页创建。
在下面的示例中，我们将定义一个 datasource。datasource 可以初始化为 array、object、URL、JSON 和类似的格式。多个参数在此插件中起作用。例如，我们可以添加 pageSize:10 来选择每页的条目。
让我们首先深入研究代码块。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pagination example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>
</head>
<body>
<div>
<section>
<div id="container"></div>
<div id="pagination"></div>
</section>
</div>
<script>
$(function () {
let container = $('#pagination');
container.pagination({
dataSource: [
{number: "Number 1"},
{number: "Number 2"},
{number: "Number 3"},
{number: "Number 4"},
{number: "Number 5"},
{number: "Number 6"},
{number: "Number 7"},
{number: "Number 8"},
{number: "Number 9"},
{number: "Number 10"},
{number: "Number 11"},
{number: "Number 12"},
{number: "Number 13"},
{number: "Number 14"},
{number: "Number 15"},
{number: "Number 16"},
{number: "Number 17"},
],
pageSize: 5,
callback: function (data, pagination) {
var dataHtml = '<ul>';
$.each(data, function (index, item) {
dataHtml += '<li>' + item.number + '</li>';
});
dataHtml += '</ul>';
$("#container").html(dataHtml);
}
})
})
</script>
</body>
</html>
输出：
代码变小了，生成函数的工作量也减少了。所需要的只是专注于定义指定参数的关键字或构造函数，以在页面之间快速更改导航。
有关插件的更详细说明和使用方法，请查看此处的文档。
Author: Anika Tabassum Era
