用于搜索 header 值的数据表插件

Question

我正在使用 jquery 的数据表插件。在我的 table 中，我的技能价值为 header。我想搜索具有特定技能的用户。例如，如图所示，我想搜索具有技能 php 的用户。然后我应该得到约翰的名字。对于 css 我应该得到莫娜的名字。快照在这里：

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

用于搜索 header 值的数据表插件

Datatables plugin to search for header values

datatables

jquery-datatables