jQuery - Comment filtrer les lignes onclick?

Question

Je suis en train de comprendre comment filtrer une table en fonction de la classe de ligne lorsque je clique sur un bouton. Je l'ai regardé différents plugins jquery, mais aucun d'entre eux semblent faire ce que je besoin de le faire. Certains ont textboxes ce filtre, etc., et je l'ai essayé d'adapter le code, mais franchement, je fais juste un grand désordre ... Aide? J'ai une table qui ressemble à ceci:

<table>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
</table>

Et j'ai trois boutons:

<input type="button" name="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" name="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" name="filtermr" /> <!-- clicking this will only show rows with mr class -->

Answer 1

Vous pouvez faire quelque chose comme ci-dessous, respectivement, pour chaque clic de bouton, il devrait fonctionner.

$("tr:not(.dr)").hide();
$("tr.dr").show();

IE:

$(document).ready(function(){
    $(":button[name='filterdr']").click(function(){
        $("tr:not(.dr)").hide();
        $("tr.dr").show();
    });
});

Answer 2

Quelque chose comme cela pourrait faire l'affaire:

$('input[type=button]').click(function()
{
    $('tr').hide()
        .filter('.' + this.name.replace(/filter/, '')).show();
});

Ajout d'un ID à votre table serait une bonne idée.

Answer 3

<input type="button" id="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" id="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" id="filtermr" /> <!-- clicking this will only show rows with mr class -->

JQuery:

$('#filterdr').click(function() { 
   $('table tr').hide();
   $('table tr.dr').show();
});

et vous faire la même chose pour les autres boutons.

Answer 4

DataTables fait exactement ce dont vous avez besoin:

• Colonne ou de filtrage de ligne
• la gestion des événements pour la création de la ligne
• Filtrage pour toutes les colonnes d'une seule zone de texte de recherche
• Multicolumn tri
• Les lignes éditables

Je l'ai utilisé ce sur des projets de production et de certains cas, j'ai choisi d'utiliser DataTables sur Telerik RadGrad. Il est très flexible et idéal pour RIA.