jquery - 数据表:根据列中的值过滤行

Question

我需要从数据表中过滤掉列中不包含特定值的行。例如，对于下面的数据，我只想显示 type = "Dog"的结果:

<table id="petowners">
<tr>
    <th>Type</th>
    <th>Breed</th>
    <th>Owner</th>
</tr>
<tr>
    <td>Dog</td>
    <td>Doberman</td>
    <td>Peter</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Jaguar</td>
    <td>Paul</td>
</tr>
<tr>
    <td>Dog</td>
    <td>Poodle</td>
    <td>Mary</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Lion</td>
    <td>Ringo</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Tiger</td>
    <td>John</td>
</tr>
</table>

这是我用来配置排序和每页结果的脚本。显然，基于列的过滤是我需要帮助的缺失部分。

$(document).ready(function() {
    $('#petowners').dataTable( {
        "order": [[ 0, "asc" ]],
        "iDisplayLength": -1,
        "oLanguage": 
            {
                "sLengthMenu": 'Display <select>'+
                    '<option value="10">10</option>'+
                    '<option value="10">25</option>'+
                    '<option value="10">50</option>'+
                    '<option value="100">100</option>'+
                    '<option value="500">500</option>'+
                    '<option value="-1">All</option>'+
                    '</select> records'
            },
    } );
} );

我需要添加两个链接、按钮或复选框，一个用于“狗”，一个用于“猫”。

当用户单击“Dog”时，仅显示“Type”列中包含“Dog”的行。类似地，当单击“Cat”时，只应显示“Type”列中包含“Cat”的行。

这似乎是一个相当简单的功能，但我无法在 datatables.net 站点中找到任何显示如何完成此操作的内容。

我希望这是有道理的，有人可以提供帮助。

提前谢谢了
头脑清醒

Answer 1

使用当前版本的 DataTables，您可以使用“搜索”功能执行此操作。

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

如果您想撤消过滤器，只需传递一个空字符串而不是正则表达式。

data_table.columns(column_index).search('', true, false).draw();

希望这可以帮助。