Question

使用这个js分页我希望得到一些关于如何添加下一个和上一个按钮的帮助。此外，我一直在努力做到这一点，以便OL是动态的，并且拥有与内容一样多的页面。非常感谢一些帮助。 jfiddle

 pageSize = 3;

 showPage = function(page) {
 $(".content").hide();
 $(".content").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
});        
}

showPage(1);

<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>

<ol id="pagin">
        <li><a class="current" href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
</ol>

Answer 1

这样的事情怎么样？ http://jsfiddle.net/jfm9y/184/

$('a.prev, a.next').click(function(){
    var a = $(this),
        current = $('#pagin li a.current'),
        page = parseInt(current.text());
    if (a.hasClass('prev')) {
        page--;
        if (page < 1) page = 1;
    } else if (a.hasClass('next')) {
        page++;
        if (page > pageCount) page = pageCount;
    }
    $('.page:eq(' + (page - 1) + ')').click();
});

Answer 2

使用您的代码，这是我的答案：http://jsfiddle.net/jfm9y/405/ 你需要的一切都在那里。如果你有更多的div，它会继续进一步发展，它是动态的。

我希望它可以帮助你

<强> JS：

pageSize = 3;
var i = 1;
showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}

showPage(i);

$("#previous").click(function() {
    $("#next").removeClass("current");
    $(this).addClass("current");
    if (i != 1) {
      showPage(--i);
    }
});
$("#next").click(function() {
    $("#previous").removeClass("current");
    $(this).addClass("current");
    if (i < ($('.content').length)/3) {
      showPage(++i);
    }    
});

一些 HTML 修改：

<ol id="pagin">
            <li><a id='previous' class="current" href="#">Previous</a></li>
            <li><a id='next' href="#">Next</a></li>
</ol>

添加下一个按钮到分页javascript

2 个答案: