jQuery - como filtrar linhas onclick?

Question

Estou tentando descobrir como filtrar uma tabela com base na aula de linha quando clico em um botão. Eu tenho olhado para vários plugins jQuery, mas nenhum deles parece fazer o que eu preciso fazer. Alguns têm caixas de texto que filtram etc., e eu tentei adaptar o código, mas, francamente, estou apenas fazendo uma grande bagunça ... ajuda? Eu tenho uma mesa que se parece com o seguinte:

<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 eu tenho três botões:

<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

Você pode fazer algo como abaixo, respectivamente, para cada botão clicar, ele deve funcionar.

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

Ou seja:

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

Answer 2

Algo assim pode fazer o truque:

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

Adicionar um ID à sua mesa seria uma boa ideia.

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 você faz o mesmo com os outros botões.

Answer 4

Datatables faz exatamente o que você precisa:

• Filtragem de coluna ou linha
• Manipulação de eventos para criação de linha
• Filtragem para todas as colunas de uma única caixa de texto de pesquisa
• Classificação multicolumn
• Linhas editáveis

Eu usei isso em projetos de produção e alguns casos que optei por usar o DatAtables sobre o Telerik Radgrad. É muito flexível e ótimo para Ria.