Tables HTML avec pagination jQuery

J'essaie de créer une table de telle sorte que, lorsqu'il y a plus de 10 lignes, je souhaite créer un lien hypertexte qui indique à l'utilisateur de passer à la page suivante. Le concept est appelé pagination, mais comment puis-je l'atteindre avec jQuery/JavaScript?Tables HTML avec pagination jQuery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Table</title> 
     <style type="text/css"> 
      th { 
       background-color: #ddd; 
      } 
      th td { 
       border: 1px solid black; 
      } 
     </style> 
    </head> 
    <body> 
     <table> 
      <th>Heading1</th> 
      <th>Heading2</th> 
      <tbody> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr></tr> 
      </tbody> 
     </table> 
    </body> 
</html>

Source

2010-11-28 user443946

Utilisez-vous un langage côté serveur? – karim79

Vous pouvez également le plug-in, si vous voulez voir le code simplifié afin que vous puissiez vous renseigner sur la façon dont fonctionne la pagination, un coup d'oeil à ce violon, je frappai pour vous.

http://jsfiddle.net/29W9Q/

Le code se fixe simplement deux boutons précédent et suivant pour changer la visibilité des lignes de la table que vous avez spécifié. Chaque fois qu'un bouton est cliqué, les étapes sont: voir si vous pouvez reculer ou avancer, masquer les lignes actuelles, trouver les lignes qui devraient être visibles, 10 en haut ou 10 en bas, puis les rendre visibles. Le reste du code est pour illustrer l'exemple.

Le vrai travail jQuery est fait par les less-than et greater-than sélecteurs: :lt() et :gt(), pour sélectionner les lignes pour masquer/afficher.

var maxRows = 10; 
$('.paginated-table').each(function() { 
    var cTable = $(this); 
    var cRows = cTable.find('tr:gt(0)'); 
    var cRowCount = cRows.size(); 

    if (cRowCount < maxRows) { 
     return; 
    } 

    /* add numbers to the rows for visuals on the demo */ 
    cRows.each(function(i) { 
     $(this).find('td:first').text(function(j, val) { 
      return (i + 1) + " - " + val; 
     }); 
    }); 

    /* hide all rows above the max initially */ 
    cRows.filter(':gt(' + (maxRows - 1) + ')').hide(); 

    var cPrev = cTable.siblings('.prev'); 
    var cNext = cTable.siblings('.next'); 

    /* start with previous disabled */ 
    cPrev.addClass('disabled'); 

    cPrev.click(function() { 
     var cFirstVisible = cRows.index(cRows.filter(':visible')); 

     if (cPrev.hasClass('disabled')) { 
      return false; 
     } 

     cRows.hide(); 
     if (cFirstVisible - maxRows - 1 > 0) { 
      cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show(); 
     } else { 
      cRows.filter(':lt(' + cFirstVisible + ')').show(); 
     } 

     if (cFirstVisible - maxRows <= 0) { 
      cPrev.addClass('disabled'); 
     } 

     cNext.removeClass('disabled'); 

     return false; 
    }); 

    cNext.click(function() { 
     var cFirstVisible = cRows.index(cRows.filter(':visible')); 

     if (cNext.hasClass('disabled')) { 
      return false; 
     } 

     cRows.hide(); 
     cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show(); 

     if (cFirstVisible + 2 * maxRows >= cRows.size()) { 
      cNext.addClass('disabled'); 
     } 

     cPrev.removeClass('disabled'); 

     return false; 
    }); 

});

Source

2010-11-28 01:14:29 Orbling

+1 c'est très utile. Je déteste utiliser des plugins à moins que ce ne soit absolument nécessaire parce que j'aime avoir une personnalisation complète du code et ne pas avoir à travailler avec le code qu'ils ont fait. – chromedude

@chromedude D'accord, bien que réinventer la roue soit "mauvais" - cela aide à savoir exactement ce qui se passe au cas où vous auriez besoin de le changer subtilement. Les clients ne tiennent pas à la réponse «ça ne fait pas ça» venant de leurs développeurs. jQuery (et les classes d'IUG draggable/droppable) sont à propos des seules bibliothèques JS que j'utilise. – Orbling

Des calculs impressionnants !!! merci je l'ai utilisé avec de légères modifications – abhijit

Répondre

Questions connexes