DataTables:根据列中的值过滤行

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"时,只应显示"类型"列中包含"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();

希望这可以帮助.

Answer 2

网址：

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

Javascript：

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function () {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }