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

切片在这里应该运行良好，特别是因为它假定到数组的末尾（.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页：切片（0,10）//前10项

第2页：切片（10,20）//接下来的10个项目

第3页：切片（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();
        }
    });

});