如果 class 列表包含 class，则数据表自定义过滤 <tr>

Question

当行有多个 class 时，如何按 class 过滤数据表行。当 class 列表包含我筛选的 class 时，我需要该行出现在任何实例中。

<tr class="gradeA">...</tr>
<tr class="gradeA gradeC">...</tr>
<tr class="gradeC">...</tr>

具有 "gradeA gradeC" 的行应该出现在两个实例中。

我试过使用 .nTr.className.split(" ")，但它没有按预期工作。

我设置了 jsFiddle。包含两个 classes 的行在第一列中有“1 has BOTH classes”作为标记，以帮助查看是否出现在两个列表中。

http://jsfiddle.net/lbriquet/k6seLxkm/

提前感谢您的帮助！！

Answer 1

您 if 条件中的逻辑是倒退的；您需要 return true/false 根据是否在元素的类中找到选中的成绩。试试这个：

$.fn.dataTableExt.[afnFiltering][1].push(function (oSettings, aData, iDataIndex) {
    var myRowClasses = oSettings.aoData[iDataIndex].nTr.className.split(" ");

    if ($('#ckb-gradeA').is(':checked')) {
        return myRowClasses.indexOf('gradeA') > -1;
    } else if ($('#ckb-gradeC').is(':checked')) {
        return myRowClasses.indexOf('gradeC') > -1;
    }

    return false;
});

Example fiddle

另请注意，您可以通过在复选框本身上使用类和 data 属性来使此逻辑更通用，例如：

<input type="radio" name="RadioGroup1" class="grade-check" data-grade="gradeA" checked="checked" />grade A
<input type="radio" name="RadioGroup1" class="grade-check" data-grade="gradeB" />grade B
<input type="radio" name="RadioGroup1" class="grade-check" data-grade="gradeC" />grade C

$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
    var myRowClasses = oSettings.aoData[iDataIndex].nTr.className.split(" ");
    var grade = $('.grade-check:checked').data('grade');    
    return myRowClasses.indexOf(grade) > -1;
});

使用此模式意味着无论添加多少个等级复选框，JS 都不需要更改。

Example fiddle

如果 class 列表包含 class，则数据表自定义过滤 <tr>

dataTables custom filtering of <tr> if class list contains a class

datatable

jquery

filter

datatables