jqPagination仅显示一个元素

Question

我正在使用jqPagination插件对新闻档案进行分页。 新闻正在使用以下格式从后端显示：

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

对于分页，我使用以下脚本，可在此处找到：

$(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（可能与某些浏览器不兼容），不如将所有新闻隐藏在第十个之后。

---

接下来，确定多少页：

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();
        }
    });

});