将长列表分成页面（EJS-jQuery-AJAX）答案

【问题标题】：Break a long list into pages (EJS-jQuery-AJAX)将长列表分成页面（EJS-jQuery-AJAX）
【发布时间】：2017-07-17 13:50:27
【问题描述】：

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

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

我用来生成列表的数据是一个对象数组 (JSON)。

【问题讨论】：

参考这个。 stackoverflow.com/questions/14035180/…
如果数据以表格格式呈现，我会使用 dataTables.net - 它通过分页选项开箱即用地完成所有这些
@ThomasK 这似乎没有回答我想做的事情。我只需要知道如何进行分页（不是无限滚动）。
@DarrenSweeney 数据以对象数组 (JSON) 的形式出现，而不是 HTML。
看看dataTables，它可以处理大多数数据类型

标签： javascript jquery ajax express

【解决方案1】：

解决方案比我想象的要容易，我下载对象数组并将其分配给一个数组，然后使用jQuery.html()、jQuery.map() 和Array.slice() 创建包含“x”个项目的页面。单击两个按钮之一时，它将更改页面并重新切片数组以显示上一页/下一页。

<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>

【讨论】：