jquery - 如何使用jqPagination

Question

请帮助我，我不知道如何使用jqPagination ( http://beneverard.github.com/jqPagination/ )。我会每个页面都有其他内容。例如，第 1 页，内容是一个段落，第 2 页是其他段落。而且我不想点击显示/隐藏来显示内容。

谢谢！

Answer 1

对，我只能假设你有类似这样的代码：

<div class="some-container">
    <p>My first paragraph</p>
    <p>My second paragraph</p>
    <p>My third paragraph</p>
</div>

<div class="pagination">
    <a href="#" class="first" data-action="first">&laquo;</a>
    <a href="#" class="previous" data-action="previous">&lsaquo;</a>               
    <input type="text" readonly="readonly" />
    <a href="#" class="next" data-action="next">&rsaquo;</a>
    <a href="#" class="last" data-action="last">&raquo;</a>
</div>

并且您想使用 jqPaginaton 按顺序显示/隐藏每个段落，请尝试以下代码：

$(document).ready(function() {

    // hide all but the first of our paragraphs
    $('.some-container p:not(:first)').hide();

    $('.pagination').jqPagination({
        max_page    : $('.some-container p').length,
        paged        : function(page) {

            // a new 'page' has been requested

            // hide all paragraphs
            $('.some-container p').hide();

            // but show the one we want
            $($('.some-container p')[page - 1]).show();

        }
    });

});​

看看这个有效的 jsFiddle 示例，它演示了使用插件能够显示和隐藏一系列段落。当然，这个例子也可以扩展到其他元素/场景。

请务必评论这是否解决了您的问题。

Answer 2

我正在使用 jPages。这工作正常。

只需给您的页面一个ID。并放置一个不需要此信息的 div。

在你的jQuery中，你可以添加这个：

$(".holder").jPages({
    containerID: "pageDivId",
    perPage: 3
});

持有者是您创建的新 div。而containerId 是你整个pagediv 的id。

你可以在这里查看 jPages