用jquery或javascript简单分页 [英] Simple pagination with jquery or 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或javascirpt，我将非常感激代码，我可以应用到这个HTML代码。

感谢您的帮助： - ）

解决方案

使用jQuery：

 < a href =＃id =prev>上一页页面< / A> 
< a href =＃id =next>下一页< / a> 
< div class =pagination> 
< div class =postid =page1> <！ - 我给每个页面一个ID。 - > 
< h3> head1< / h3> 
< p> Test1< / p> 
< / div> 
 
< div class =postid =page2> 
< h3> head2< / h3> 
< p> Test2< / p> 
< / div> 
 
< div class =postid =page3> 
< h3> head3< / h3> 
< p> Test3< / p> 
< / div> 
 
< div class =postid =page4> 
< h3> head4< / h3> 
< p> Test4< / p> 
< / div> 
 
< div class =postid =page5> 
< h3> head5< / h3> 
< p> Test5< / p> 
< / div> 
 
< div class =postid =page6> 
< h3> head6< / h3> 
< p> Test6< / p> 
< / div> 
< / div> 
  

在这种情况下，您需要做的只是动态地隐藏每个页面，除了您想要看到的页面：

  function showPage（page）{
 $（'。pagination .post：not（＃page'+ page +' ）'）。隐藏（）; 
 $（'。pagination .post＃page'+ page）.show（）; 
 
 $ / code> 

如果你想要下一个和上一个按钮，你可以轻松地这样做： / p>



 函数prevPage（）{
 if（page == 1）{
 page = $（'。分页.post'）。长度; 
} else {
 page--; 
} 
 showPage（page）; 
} 
 
 function nextPage（）{
 if（page == $（'。pagination .post'）。length）{
 page = 1; 
} else {
 page ++; 
} 
 showPage（page）; 
 
 
 
 
 
 $ b请注意，您需要存储页面的编号（我使用< 
 
 
  page  /jsfiddle.net/nv1y59Lu/1/rel =nofollow>示例小提琴 
 
I want to include a "pagination" with jquery or javascript to my website.

Therefore, I have created the following simple html-code:
<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>
I am Newbie in web development and I don't know how to write a simple
javascript or jquery code to make a pagination work.
After searching the internet I haven't found any simple solution for it.

Therefore, I would really appreciate it if you could tell me a jquery or javascirpt code that I can apply to this html code.

Thanks for any help :-)
解决方案
Using 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>
All you need to do in this situation is dynamically hide every page except the one you want to see:
function showPage(page) {
    $('.pagination .post:not(#page'+page+')').hide();
    $('.pagination .post#page'+page).show();
}
If you want next and previous buttons you can easily do so like this:
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);
}
Just note that you need to store the number of the page (I used page in the example) if you want to have next and previous buttons.

Example Fiddle

                        
这篇关于用jquery或javascript简单分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！