Einfache jQuery Paginierung

Question

Ich habe eine Seite mit etwa 50 divs. Ich möchte diese divs in Gruppen von sechs organisieren, so dass der Kunde keine "Informationsüberflutung" bekommt. Ich habe eine einfache example/reduced test case meines Problems erstellt. Wie Sie sehen können, gibt es viele divs, und ich möchte, dass wenn die Seite geladen wird, nur die ersten sechs sichtbar sind, aber wenn Sie auf Seite 2 oder nächste klicken, werden die nächsten sechs aufgedeckt und so weiter. Die Klasse der Seitennummer, auf der Sie sich befinden, sollte ebenfalls auf class="current" festgelegt werden.

Bisher habe ich versucht mit jQuery, aber ich habe ziemlich stecken geblieben! Jede Hilfe würde sehr geschätzt werden!

Answer 1

Wenn eine Seite angefordert wird, blenden Sie alle Inhalte divs, dann durch sie durchlaufen und zeigen diejenigen, die auf der „Seite“ angezeigt werden soll:

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

Teile dieses Codes ist nicht schön aber ich denke, dass es die Arbeit tut

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); 

});​