Datatables插件用于搜索标头值

Question

我正在使用jquery的dataTables插件。我在表格中有技能值作为标题。我想为具有特定技能的用户提供服务。例如，如图所示，我想搜索具有技能php的用户。然后我应该得到约翰的名字。对于CSS我应该得到Mona的名字。快照在这里：

Answer 1

您可以通过为数据表实现自定义过滤器来实现此目的，如here所述。

在过滤之前，您必须找到要过滤的列的索引，然后检查每行中的值。 这可能看起来像这样：

<input type="text" id="skillFilter" />
<table id="example">
    <thead>
        <tr>
            <th>Skills</th>
            <th>PHP</th>
            <th>CSS</th>
            <th>HTML</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>1</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Mona</td>
            <td>0</td>
            <td>1</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

脚本：

$.fn.dataTable.ext.search.push(
    function(settings, data) {
        if (skillFilterColumnIndex != undefined) {
            //Get the data of each row
            var data = data[skillFilterColumnIndex] || "";
            return data > 0;
        } else {
            return 1;
        }
    });

$("#skillFilter").change(function() {
    var skill = $("#skillFilter").val().toLowerCase();
    //Find the column index with the skill to filter
    $.each($("#example thead th"), function(index, element) {
        if (index != 0 && element.innerHTML.toLowerCase() == skill) {
            skillFilterColumnIndex = index;
        }
    });
    table.fnDraw();
});