JQuery Simple Pagination

J'ai une page avec environ 50 divs. Je tiens à organiser ces divs en groupes de six, de sorte que le client n'obtient pas la "surcharge d'information'. J'ai créé un simple exemple/réduction des cas de test de mon problème. Comme vous pouvez le voir, il y a beaucoup de divs, et je veux que lorsque la page se charge, seuls les six premiers sont visibles, mais lorsque vous cliquez sur la page 2 ou la prochaine, la prochaine six sont révélés et cetera. La classe du numéro de la page vous doit également être réglé pour avoir class="current".

Pour l'instant j'ai essayé à l'aide de jQuery, mais j'ai été très coincé! Toute aide serait grandement appréciée!

Avez-vous pensé à un affichage des onglets au lieu de pagination. Je pense tout simplement qu'une pagination plus de sens dans des cas comme une grille, mais pour diviser le contenu complet je suppose que tabview est mieux
Oui, vous avez raison, dans votre cas, une pagination fait un peu plus de sens.
Il ya des tonnes de plugins jQuery pour cela. Par exemple: jquery4u.com/plugins/10-jquery-pagination-plugins

OriginalL'auteur jacktheripper | 2012-04-05

  1. 21

    Lorsqu'une page est demandée, cacher tout le contenu de la vrd, puis itérer à travers eux et de montrer à ceux qui doivent apparaître sur la "page":

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

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

    tout à fait d'accord...mais vos boutons suivant et précédent ne fonctionnent pas dans votre jsfiddle..
    Avez un doute, pourquoi tu veux utiliser parseInt si u peut afficher le texte par l'utilisation de ce.texte()
    m'a beaucoup aidé! merci!!!! 🙂

    OriginalL'auteur georg

  2. 5

    Parties de ce code n'est pas assez, mais je pense qu'il fait le travail

    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);
});​
    Chaque fois que vous voyez un code comme $('.content').eq((page-1)*6).show().next().show().next().show().next().show().next().show().next().show(); c'est un candidat à l'aide d'une boucle. Just sayin'

    OriginalL'auteur offroff