簡單的jQuery分頁

Question

我有一個約50 div的頁面。我希望將這些div分成六組，以便客戶不會得到「信息超載」。我創建了一個簡單的example/reduced test case我的問題。正如你所看到的，有很多divs，我希望它能夠在頁面加載的時候，只有前六個可見，但是當你點擊第2頁或者第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); 

});​