使用<tr>的类名进行dataTables自定义过滤

Question

使用<tr>的类名进行dataTables自定义过滤

4

我会尽力完成您的翻译工作。以下是我翻译的结果，仅供参考：

我阅读了http://datatables.net/examples/plug-ins/range_filtering.html上的文档，以便对范围进行过滤，但我不太明白如何通过行的类来过滤项目。

我想要几个按钮，当点击时，可以通过每行的类（字符串值）来过滤dataTable。例如，如果您有：

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

他们两个默认都会显示。当有人点击其中一个按钮时，“do_filter”的所有行将被隐藏，dataTables 重新绘制列表，以使此更改在所有页面中发生。

- Derek

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mg1075 · Accepted Answer

这是一个 datatables fiddle 的 fork，用于完全不同的事情。

http://jsfiddle.net/72xGx/

这个示例以datatables网站上的“范围过滤”示例为起点。它使用复选框来确定是否应用筛选器，并且所有筛选器默认都是打开的。当您勾选和取消勾选复选框时，表格中的数据应相应地进行筛选。毫无疑问，这可能需要进一步改进，但我相信您会发现这是实现您所述目标的一种途径。

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

HTML表格结构的一部分
（以便注意一些<tr>元素上的css类）

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