简单的分页与jquery或javascript

Simple pagination with jquery or javascript

本文关键字：javascript jquery 分页 简单      更新时间：2023-09-26

我想用jquery或javascript在我的网站中包含一个"分页"。

因此，我创建了以下简单的html代码: 
<div class="post-list">
    <div class="post">
    <h3> head1 </h3>
    <p> Test1 </p>
    </div>
    <div class="post">
    <h3> head2 </h3>
    <p> Test2 </p>
    </div>
    <div class="post">
    <h3> head3 </h3>
    <p> Test3 </p>
    </div>
    <div class="post">
    <h3> head4 </h3>
    <p> Test4 </p>
    </div>
    <div class="post">
    <h3> head5 </h3>
    <p> Test5 </p>
    </div>
    <div class="post">
    <h3> head6 </h3>
    <p> Test6 </p>
    </div>
</div>

    <div class="pagination">
    </div>

我是新手在web开发和我不知道如何写一个简单的Javascript或jquery代码使分页工作。在网上搜索之后，我没有找到任何简单的解决方案。

因此，如果你能告诉我一个jquery或javascript代码，我可以应用到这个html代码，我将非常感激。

感谢您的帮助:-)

使用jQuery: 
<a href="#" id="prev">Prev page</a>
<a href="#" id="next">Next page</a>
<div class="pagination">
    <div class="post" id="page1"> <!-- I gave every "page" an ID. -->
        <h3> head1 </h3>
        <p> Test1 </p>
    </div>
    <div class="post" id="page2">
        <h3> head2 </h3>
        <p> Test2 </p>
    </div>
    <div class="post" id="page3">
        <h3> head3 </h3>
        <p> Test3 </p>
    </div>
    <div class="post" id="page4">
        <h3> head4 </h3>
        <p> Test4 </p>
    </div>
    <div class="post" id="page5">
        <h3> head5 </h3>
        <p> Test5 </p>
    </div>
    <div class="post" id="page6">
        <h3> head6 </h3>
        <p> Test6 </p>
    </div>
</div>

在这种情况下，你所需要做的就是动态地隐藏除了你想看到的页面之外的所有页面:

function showPage(page) {
    $('.pagination .post:not(#page'+page+')').hide();
    $('.pagination .post#page'+page).show();
}

如果你想要"下一步"answers"上一步"按钮，你可以这样做:

function prevPage() {
    if (page == 1) {
        page = $('.pagination .post').length;
    } else {
        page--;
    }
    showPage(page);
}
function nextPage() {
    if (page == $('.pagination .post').length) {
        page = 1;
    } else {
        page++;
    }
    showPage(page);
}

请注意，如果您希望有下一步和上一步按钮，则需要存储页面编号(在示例中我使用page)。

例子小提琴

相关文章：