Afficher/masquer les lignes avec jquery

Bonjour J'utilise du code modifié d'un autre article. Fondamentalement, je veux passer de l'affichage de 10 lignes d'une table à l'affichage de toutes les lignes (50 par exemple). Je l'ai à montrer à partir de 10 lignes à tous, mais ce que je dois faire maintenant est le code de sorte que si je clique sur le div à nouveau il bascule ou réinitialise à l'affichage de 10 lignes.Afficher/masquer les lignes avec jquery

<script type="text/javascript"> 
var numShown = 10; // Initial rows shown & index 
var numRows = $('tbody').find('tr').length; 
var numLeft = numRows - numShown; 

$(document).ready(function(){ 
// Hide rows and add clickable div 
$('tbody') 
    .find('tr:gt(' + (numShown - 1) + ')').hide().end() 
    $('#table_wrapper').after('<div id="more">Show all offers <span> 
    (' + numLeft + ' more)</span></div>'); 

$('#more').click(function(){ 
    numShown = numShown + numRows; 
    $('tbody').find('tr:lt('+numShown+')').show(); 
    $("#more").html("Show top 10 offers"); 
}) 
}) 
</script>

Source

2010-05-26 Michael

C'est l'une des utilisations de la méthode .toggle():

$('#more').toggle(
      function(){ 
      numShown = numShown + numRows; 
      $('tbody').find('tr:lt('+numShown+')').show(); 
      $("#more").html("Show top 10 offers"); 
      }, function() { 
      // set the local vars you need here 
      $('tbody').find('tr:gt('+(numShown-1)+')').hide(); 
      $('#more').html('Show all offers <span>('+numLeft+' more)</span>'); 
      });

Comme il n'y a pas de balisage Je ne suis pas sûr que ce soit exactement ce qui va travailler avec votre configuration , mais le point est de réinitialiser les lignes dans leur état initial dans la deuxième fonction de toggle()

Source

2010-05-26 23:05:41 mVChr

Je ne connaissais pas cette forme de 'toggle'. Je me demande comment jQuery connaît l'état dans lequel se trouve la table: -? – nc3b

Oui, c'était ce que je cherchais, merci! – Michael

Y a-t-il quelque chose que je puisse ajouter de sorte que lorsque le bouton bascule à nouveau/cache les lignes, le point de vue du navigateur retourne au bas de la table (sa position d'origine)? – Michael

$(some_selector) renvoie une liste d'éléments correspondants. Vous pouvez appeler .slice() sur eux, et faire ce que vous voulez sur chacun des éléments. Notez que les éléments de la liste ne sont pas des objets jquery, mais les objets DOM par défaut (ceux que vous obtenez des méthodes getElementBy...). Vous pouvez soit travailler sur ceux-ci ou faire $(domobject) pour obtenir un objet jquery à nouveau.

Source

2010-05-26 22:56:00 Marian

Essayez ceci:

$('#more').click(function(){ 
    if(numShown <= 10) 
    { 
     //show some more 
     numShown = numShown + numRows; 
     $('tbody').find('tr:lt('+numShown+')').show(); 
     $("#more").html("Show top 10 offers"); 
    } 
    else 
    { 
     //hide some rows 
     numShown = 10; 
     $('tbody').find('tr:gt('+numShown+')').hide(); 
     $("#more").html("Show more"); 
    } 
})

Source

2010-05-26 22:58:43 nc3b

Je préfère utiliser addClass() pour masquer les lignes, en ajoutant un class style avec display: none; dans ma feuille de style CSS. Ensuite, pour montrer les lignes précédemment cachées, tout ce que j'ai à faire est de sélectionner les lignes avec cette classe et supprimer la classe d'eux. Sth like:

$('.hidden_row').removeClass('hidden_row');

Source

2010-05-26 23:07:11 FelipeAls

Afficher/masquer les lignes avec jquery

Répondre

Questions connexes