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，您可以使用＆＃39;搜索＆＃39;功能

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

HTML：

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

Answer 3

试试这个：

$('#petowners tr').each(function(){ var tdVal = $(this).find("td:first").text(); if(tdVal == "Dog") continue; else $(this).hide(); });

你想要删除（）或隐藏（）。也可以用类似的方式为“Cat”

做

DataTables：根据列中的值过滤行

3 个答案: