jQuery - Come filtrare le righe onclick?

Question

Sto cercando di capire come filtrare una tabella in base alla classe di fila quando si fa clic su un pulsante. Ho cercato in vari plugin jQuery, ma nessuno di loro sembra di fare quello che ho bisogno di fare. Alcuni hanno caselle di testo che filtrano, ecc, e ho provato adattare il codice, ma, francamente, mi sto solo facendo una grande gran casino ... Aiuto? Ho una tabella che assomiglia a questo:

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

E ho tre pulsanti:

<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

Si potrebbe fare qualcosa di simile al di sotto rispettivamente per ogni clic del pulsante, dovrebbe funzionare fuori.

$("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

Qualcosa di simile potrebbe fare il trucco:

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

L'aggiunta di un ID al tavolo sarebbe una buona idea.

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();
});

e tu fai lo stesso per gli altri pulsanti.

Answer 4

DataTable fa esattamente quello che vi serve:

• colonna o filtraggio riga
• gestione degli eventi per la creazione su riga
• Filtering per tutte le colonne da una singola ricerca di testo
• multicolonna ordinamento
• Righe modificabili

Ho usato questo su progetti di produzione e di alcuni casi che ho scelto di utilizzare DataTable su Telerik RadGrad. E 'molto flessibile e grande per RIA.