jqPagination 只显示一个元素

Question

我正在使用jqPagination plugin 对我的新闻档案进行分页。使用这种格式从后端显示新闻：

<ul class="news-pagination">
    <li>
        <h5>Title</h5>
        <p>News text</p>
        <a href="#">read more</a>
    </li>
</ul>

我使用以下脚本进行分页，找到here：

$(document).ready(function() {
    $('.news-pagination li:not(:first)').hide();
    $('.pagination').jqPagination({
        max_page: $('.news-pagination li').length,
        paged: function(page) {
            $('.news-pagination li').hide();
            $($('.news-pagination li')[page - 1]).show();
        }
    });
});

脚本有效，但我的问题是它每页只显示一个项目 (<li>)，我不知道如何设置每个页码的帖子，所以我可以每页显示 10 个帖子。

Answer 1

Slice 在这里应该可以很好地工作，尤其是因为如果超出范围，它会假定到数组的末尾 (.length)。

跳到底部查看整个代码。这里是JSFiddle 来查看它的实际效果。

---

首先，页面加载时：

$('.news-pagination li').slice(10).hide();

我们不使用 CSS（可能与某些浏览器不兼容），而是隐藏第 10 条之后的所有新闻。

---

接下来，确定有多少页：

max_page: Math.ceil($('.news-pagination li').length / 10),

分页脚本只跟踪页面。由您决定您需要什么号码。你说你想要每页 10 个，所以我们将你拥有的新闻数组的总长度除以 10。所以如果我们有 55 篇新闻文章，那就是 5.5 页。 但是 5.5 页听起来很奇怪......我们真正想要的是四舍五入。 Math.ceil 为我们做到了这一点。所以现在我们有 5 页，每页 10 条，其余的新闻在第 6 页。只是一个例子。但这会很好地为我们设置分页。

---

现在是用户交互：

网站访问者想要转到下一页。我们只处理了在页面最初加载时查看我们想要的所有内容。好吧，分页脚本让我们处理：paged: function (page)

$('.news-pagination li').hide();

这会去掉所有的新闻条目，为下一页的新闻做准备。我们可以在技术上重新计算我们当前正在处理的项目，但这会浪费时间。

---

最后一步：

$('.news-pagination li').slice((page - 1) * 10, (page * 10)).show();

这是锦上添花的分页蛋糕 - 我们这里是从新闻数组中切出 10 个项目来展示给读者。由于我们获得了已请求的页面，因此我们只需要传递正确的数字即可获取应在该特定页面上显示的新闻。

第 1 页： slice(0, 10) // 前 10 个项目

第 2 页： slice(10, 20) // 下 10 个项目

第 3 页： slice(20, 30) // 以此类推

---

总而言之，我们有这个：

$(document).ready(function () {

    $('.news-pagination li').slice(10).hide();

    $('.pagination').jqPagination({
        max_page: Math.ceil($('.news-pagination li').length / 10),
        paged: function (page) {
            $('.news-pagination li').hide();
            $('.news-pagination li').slice((page - 1) * 10, (page * 10)).show();
        }
    });

});