Question

我使用express在 Node.js 的仪表板上工作，但是，有时我会生成非常长的列表，我想在页面中打破它们20个项目，人们将有按钮转到上一页/下一页，但我不知道什么是从列表中替换HTML的理想方式，因此它显示了20个上一个/下一个项目（取决于哪个他们按下的按钮）。

我使用Bootstrap 3.3.7和jQuery 3.2.1，但如果需要，我也可以使用AJAX（从本地API端点请求数据）。 express 4.15.3代表 Node.js 。

我用来生成列表的数据是对象数组（JSON）。

Answer 1

解决方案比我想象的要容易，我下载对象数组并将其分配给数组，然后使用jQuery.html()，jQuery.map()和Array.slice()创建带＆的页面＃39; X＆＃39;物品数量。单击其中一个按钮时，它将更改页面并重新切片以显示上一页/下一页。

<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <nav aria-label="guildPager">
            <ul class="pager">
                <li id="previousPage" class="previous"><span aria-hidden="true">&larr;</span></li>
                <li id="nextPage" class="next"><span aria-hidden="true">&rarr;</span></li>
            </ul>
        </nav>
        <div id="guildList"></div>
    </div>
</div>

<script>
    var arr = [{...}, {...}, ..., {...}];
    var page = 0;
    var amount = 20;
    var pages = Math.ceil(arr.length / amount);

    function pagify() {
        if (page === 0 && !$("#previousPage").hasClass("disabled")) $("#previousPage").addClass("disabled");
        else if ($("#previousPage").hasClass("disabled")) $("#previousPage").removeClass("disabled");

        if (page === pages - 1 && !$("#nextPage").hasClass("disabled")) $("#nextPage").addClass("disabled");
        else if ($("#nextPage").hasClass("disabled")) $("#nextPage").removeClass("disabled");

        $("#guildList").html($.map(arr.slice(page * amount, (page * amount) + amount), (a) => {
            return `<h4>${a.name}<small> ${a.users} members.</small></h4><hr></hr><br />`;
        }));
    }
    pagify();

    $("#nextPage").click(function() {
        if ($(this).hasClass("disabled")) return;
        page++;
        pagify();
    });
    $("#previousPage").click(function() {
        if ($(this).hasClass("disabled")) return;
        page--;
        pagify();
    });
</script>

将长列表分成几页（EJS-jQuery-AJAX）

1 个答案: