简单的jQuery分页(Simple jQuery Pagination)

我有它约50 div的一页。 我想这些div组织分为六组，以便客户端没有得到“信息过载”。 我创建了一个简单的例子/缩小测试用例我的问题。 正如你可以看到，有一个大量的div，我想它，以便在页面加载时，只有首先六个是可见的，但是当你点击或未来2页，未来半年都透露出等等。 你是在类的页码也应设置为具有class="current" 。

到目前为止，我已经使用jQuery试过，但我已经得到相当卡住！ 任何帮助将非常感激！

Answer 1:

当请求一个页面，隐藏所有内容的div，然后遍历它们并显示这些应该出现在“页”上：

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

http://jsfiddle.net/jfm9y/184/

Answer 2:

这部分代码是不漂亮，但我认为它的工作

var currentpage = 1;
var pagecount = 0;

function showpage(page) {
    $('.content').hide();
    $('.content').eq((page-1)*6).show().next().show().next().show().next().show().next().show().next().show();
    $('#pagin').find('a').removeClass('current').eq(page).addClass('current');

}

$("#pagin").on("click", "a", function(event){
    event.preventDefault();
    if($(this).html() == "next") {
        currentpage++;
    }
    else if($(this).html() == "prev") {
        currentpage--;
    } else {
            currentpage = $(this).html();
    }
    if(currentpage < 1) {currentpage = 1;}
    if(currentpage > pagecount) {currentpage = pagecount;}
    showpage(currentpage);
});                                                                  

$(document).ready(function() {
    pagecount = Math.floor(($('.content').size()) / 6);
    if (($('.content').size()) % 6 > 0) {
        pagecount++;
    }

    $('#pagin').html('<li><a>prev</a></li>');
    for (var i = 1; i <= pagecount; i++) {
        $('#pagin').append('<li><a class="current">' + i + '</a></li>');
    }
    $('#pagin').append('<li><a>next</a></li>');
    showpage(1);

});​

文章来源: Simple jQuery Pagination