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

});