JavaScript 中的简单分页

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. 自定义分页功能对网页进行分页
  2. 使用 Jquery 插件 pagination.js 在网页上冲浪
JavaScript 中的简单分页

在 JavaScript 中,我们经常定义我们首选的函数范围来提取某些活动。JavaScript 中的分页可以通过多个函数的组合手动编写脚本。

我们将演示如何创建分页以从一个页面浏览到另一个页面。我们将创建基本的分页函数来操作它,我们还将看到另一个使用 jquery 插件 pagination.js 的示例,这将使我们的编码体验更轻松。

自定义分页功能对网页进行分页

我们将首先声明包含我们数据的对象。下一步是计算每个数据以及我们希望在一页上预览多少。在此过程中,我们还将获得网页上的总页数。

totNumPages 函数计算出我们的总页数之后,我们将创建基础函数来点击 prevnext

让我们检查代码块以有一个清晰的概念。

<!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>&nbsp;
<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 函数在可视化导航和每页对象限制方面起着至关重要的作用。此外,第一页和最后一页上的 prevnext 可点击项的可见性。每当页面加载和任何重新加载后,默认页面设置为 page 1

使用 Jquery 插件 pagination.js 在网页上冲浪

Jquery 插件使在网页中实现分页变得更加容易。你需要在 header 部分为插件添加 CDN,轻松导入预定义的约定来处理分页创建。

在下面的示例中,我们将定义一个 datasourcedatasource 可以初始化为 arrayobjectURLJSON 和类似的格式。多个参数在此插件中起作用。例如,我们可以添加 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>

输出:

pagination_plugin_jquery

代码变小了,生成函数的工作量也减少了。所需要的只是专注于定义指定参数的关键字或构造函数,以在页面之间快速更改导航。

有关插件的更详细说明和使用方法,请查看此处的文档

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook