DataTables：根据列中的值过滤行 [英] DataTables: filter rows based on value in column

问题描述

我需要从列中不包含某个值的数据表中过滤出来。例如，下面的数据，我想显示结果，其中type =Dog：

 < table id =peowners> 
< tr> 
< th> Type< / th> 
< th>品种< / th> 
< th>所有者< / th> 
< / tr> 
< tr> 
< td> Dog< / td> 
< td> Doberman< / td> 
< td>彼得< / 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：'显示< 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> ; / option>'+ 
'< / select>记录'
}，
}）; 
}）; 
  

我需要添加两个链接，按钮或复选框，一个用于Dog，一个用于Cat 。

当用户点击狗时，只显示类型列中包含狗的行。类似地，当单击猫时，只应显示类型列中包含猫的行。

这似乎是一个相当简单的功能，但是我没有能够在datatables.net网站上找到任何可以做到这一点的东西。

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

非常感谢提前
wOnkO tHe SaNE

解决方案

Html：

 < input type =submitvalue =Dogonclick =Search（'Dog'）/> 
< input type =submitvalue =Catonclick =Search（'Cat'）/> 
< input type =submitvalue =Clearonclick =Clear（）/> 
  

Javascript：

 code> function Clear（）{
 $（'＃petowners tr'）。show（）; 
} 
 
功能搜索（word）{
 Clear（）;每个（function（）{
 if（$（this）.html（）！= word）$ {
 
 $（'＃petowners tr> td：first-child' b $ b $（this）.parent（）。hide（）; 
} 
}）; 
} 
  

I need to filter out rows from a datatable that do not contain a certain value in a column. For example, with the data below, I would like to just show results where 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>

Here's the script that I am using to configuring sorting and results-per-page. Obviously the column-based filtering is the missing bit I need help with.

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

I need to add two links, buttons or checkboxes, one for "Dog" and one for "Cat".

When a user clicks "Dog", only the rows that contain "Dog" in the "Type" column are displayed. Similarly when "Cat" is clicked, only the rows that containt "Cat" in the "Type" column should be displayed.

It seems like a fairly straightforward feature, but I have not been able to find anything in the datatables.net site that shows how this could be done.

I hope this makes sense and someone can help.

Many thanks in advance wOnkO tHe SaNE

解决方案

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

这篇关于DataTables：根据列中的值过滤行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！