jquery - property - dataTables filtrado personalizado por nombre de clase de<tr>

jquery datatable set column title

Question

Leí la documentación en http://datatables.net/examples/plug-ins/range_filtering.html para filtrar por un rango, pero no entiendo muy bien cómo filtrar elementos por clase de una fila.

Quiero tener varios botones que al hacer clic, filtrar la tabla de datos por las clases (valores de cadena) de cada fila. Entonces, por ejemplo, si tiene

<tr class="dont_filter">
<tr class="do_filter">

Ambos aparecerían por defecto. Cuando alguien hace clic en uno de los botones, todas las filas con "do_filter" están ocultas, y dataTables vuelve a dibujar la lista para que este cambio ocurra en todas las páginas.

Answer 1

Aquí hay una bifurcación de un violín de datatables que se utilizó para algo completamente diferente.

http://jsfiddle.net/72xGx/

Esta muestra toma el ejemplo de "filtrado de rango" en el sitio de tablas de datos como punto de partida. Utiliza casillas de verificación para determinar si se debe aplicar un filtro y todos los filtros están activados de manera predeterminada. Cuando marque y desmarque las casillas de verificación, los datos de la tabla deberán filtrarse en consecuencia. Sin duda, esto podría ser una buena limpieza, pero creo que encontrará que es una ruta para lograr su objetivo declarado.

JavaScript

/* Custom filtering function which will filter data in column four between two values */
$.fn.dataTableExt.afnFiltering.push(

function (oSettings, aData, iDataIndex) {
    var gA = $(''#ckb-gradeA'').is('':checked''),
        gC = $(''#ckb-gradeC'').is('':checked''),
        gU = $(''#ckb-gradeU'').is('':checked''),
        gX = $(''#ckb-gradeX'').is('':checked'');

    var myRowClass = oSettings.aoData[iDataIndex].nTr.className;

    if (myRowClass === ''gradeA'' || myRowClass === ''gradeA even'' || myRowClass === ''gradeA odd'') {
        return gA === true ? true : false;
    } else if (myRowClass === ''gradeC'' || myRowClass === ''gradeC even'' || myRowClass === ''gradeC odd'') {
        return gC === true ? true : false;
    } else if (myRowClass === ''gradeU'' || myRowClass === ''gradeU even'' || myRowClass === ''gradeU odd'') {
        return gU === true ? true : false;
    } else if (myRowClass === ''gradeX'' || myRowClass === ''gradeX even'' || myRowClass === ''gradeX odd'') {
        return gX === true ? true : false;
    } else {
        return false;
    }
});

$(function () {
    /* Initialise datatables */
    var oTable = $(''#example'').dataTable();

    /* Add event listeners to the two range filtering inputs */
    $(''#ckb-gradeA'').change(function () {
        oTable.fnDraw();
    });
    $(''#ckb-gradeC'').change(function () {
        oTable.fnDraw();
    });
    $(''#ckb-gradeU'').change(function () {
        oTable.fnDraw();
    });
    $(''#ckb-gradeX'').change(function () {
        oTable.fnDraw();
    });
});

parte de la estructura de la tabla html
(para tener en cuenta algunas de las clases de css en los elementos <tr> )

    <tr class="gradeC">
        <td>Trident</td>
        <td>Internet Explorer 5.0</td>
        <td>Win 95+</td>
        <td class="center">5</td>
        <td class="center">C</td>
    </tr>
    <tr class="gradeA">
        <td>Trident</td>
        <td>Internet Explorer 5.5</td>
        <td>Win 95+</td>
        <td class="center">5.5</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Trident</td>
        <td>Internet Explorer 6</td>
        <td>Win 98+</td>
        <td class="center">6</td>
        <td class="center">A</td>
    </tr>