jQuery - Cómo filtrar filas onclick?

Question

Estoy tratando de encontrar la manera de filtrar una tabla basada en la clase fila al hacer clic en un botón. He estado buscando en varios plugins jQuery, pero ninguno de ellos parece hacer lo que necesito que haga. Algunos tienen cuadros de texto que el filtro, etc., y he tratado de adaptar el código, pero, francamente, sólo estoy haciendo un gran lío grande ... ayuda? Tengo una tabla que tiene este aspecto:

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

Y tengo tres botones:

<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

Se podría hacer algo así por debajo, respectivamente, para cada botón de clic, se debe trabajar a cabo.

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

Algo como esto puede hacer el truco:

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

La adición de un identificador a su mesa sería una buena 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();
});

y usted hace lo mismo para los otros botones.

Answer 4

DataTables hace exactamente lo que necesita:

• columna o fila de filtrado
• Manejo de Eventos para el creación de la fila
• Filtrado para todas las columnas de un solo cuadro de texto de búsqueda
• varias columnas de clasificación
• Las filas editables

He utilizado este en proyectos de producción y algunos casos he optado por utilizar tablas de datos sobre Telerik RadGrad. Es muy flexible y grande para RIA.