jQuery - Comment filtrer les lignes onclick?

Question

J'essaie de comprendre comment filtrer une table basée sur la classe de rangée quand je clique sur un bouton. J'ai regardé divers plugins jquery, mais aucun d'entre eux ne semble faire ce que j'ai besoin de faire. Certains ont des boîtes de texte qui filtrent, etc., et j'ai essayé d'adapter le code mais franchement, je fais juste un gros bazar ... 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 moi avons 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

<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 3

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 4

DataTables fait exactement ce dont vous avez besoin:

• colonne ou d'une ligne de filtrage
• gestion des événements pour le couloir création
• Filtrage pour toutes les colonnes à partir d'une seule recherche textbox
• Multicolumn tri
• Lignes modifiables

Je l'ai utilisé sur des projets de production et dans certains cas, j'ai choisi d'utiliser DataTables sur Telerik RadGrad. C'est très flexible et génial pour RIA.