0

我正在使用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 个帖子。

4

1 回答 1

3

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

});
于 2014-02-06T23:39:41.777 回答