带文本，复选框和选择的jQuery表格过滤器

问题描述：

需要使用文本搜索，复选框和选择从表格外部过滤表格。对于jQuery，PicNet Table Filter适用于在表格之外搜索和使用复选框......但我无法找到任何有关如何让选择框工作的示例。有人知道吗？带文本，复选框和选择的jQuery表格过滤器

**我可能是太具体的在这里，但认为我会至少来电咨询。*

我也开到比PicNet其他的可能性。

已更新：这是我的代码到目前为止，我想通过两个yes/no复选框在主体顶部选择一个选项。

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>PicNet Table Filter Demo</title> 
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>     
<script type="text/javascript" src="picnet.table.filter.min.js"></script> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     // Randomly Create Data Rows 


     // Initialise Plugin 
     var options1 = { 
      additionalFilterTriggers: [$('#onlyyes'), $('#onlyno'), $('#itemone'), $('#quickfind')], 
      clearFiltersControls: [$('#cleanfilters')], 
      matchingRow: function(state, tr, textTokens) { 
       if (!state || !state.id) { return true; }     
       var val = tr.children('td:eq(2)').text(); 
       var val2 = tr.children('td:eq(3)').text(); 
       switch (state.id) { 
        case 'onlyyes': return state.value !== 'true' || val === 'yes'; 
        case 'onlyno': return state.value !== 'true' || val === 'no'; 
        case 'itemone': return state.value !== 'true' || val2 === 'Item 1'; 
        default: return true; 
       } 
      } 
     }; 

     $('#demotable1').tableFilter(options1); 


    }); 
</script> 
<style> 
* { font-family:arial; font-size:8pt;} 
table, td, th { border: solid 1px silver; color:#666; padding:3px 5px 3px 5px} 
th { background-color:#333; color:#fff; font-size:0.85em } 
a { color:gray; } 
.filtering { background-color:light-gray} 
#jqtf_filters { 
list-style:none; 

} 
#jqtf_filters li { 
display:inline-block; 
position:relative; 
float:left; 
margin-bottom:20px 
    } 
    .hidden, tr.filters { display: none;} 

    </style> 
    </head> 
    <body>  
<b>Additional Filters for Table 1</b><br/> 
    Only Show Yes: <input type="checkbox" id="onlyyes"/>   
Only Show No: <input type="checkbox" id="onlyno"/> 
Only Show Item 1: <input type="checkbox" id="itemone"/> 
<br/>  
Quick Find: <input type="text" id="quickfind"/> 
<br/> 
<a id="cleanfilters" href="#">Clear Filters</a> 
<br/><b>Table 1</b><br/> 
    <table id='demotable1'> 
    <thead> 
     <tr><th>Text Column 1</th><th>Number Column</th><th>Yes/No Column</th><th filter-type='ddl'>List Column</th><th style='width:100px;' filter='false'>No Filter</th><th>Date Column</th><th filter='false'>Empty</th><th class="hidden" filter='false'></th></tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Value 102</td> 
      <td>420</td> 
      <td>yes</td> 
      <td>Item 1</td> 
      <td>hello</td> 
      <td>01/11//2009</td>     
      <td></td> 
      <td class="hidden">Ed Head</td> 
     </tr> 
     <tr> 
      <td>Value 134</td> 
      <td>987</td> 
      <td>no</td> 
      <td>Item 2</td> 
      <td>hi</td> 
      <td>03/11//2009</td>     
      <td></td> 
      <td class="hidden">Joe Blow</td> 
     </tr> 
     <tr> 
      <td>Value 654</td> 
      <td>722</td> 
      <td>yes</td> 
      <td>Item 3</td> 
      <td>hello</td> 
      <td>04/11//2009</td>     
      <td></td> 
      <td class="hidden">Jimmy</td> 
     </tr> 
    </tbody> 
    </table> 

    </body> 
    </html>

+1的链接不错的插件。 – 2010-05-20 16:37:15

答

我不知道你在做什么（“需要从表格外部过滤表格” - wtf是否意味着？）。但是，如果您试图使用jQuery获取选择框的值：

$('#yourSelectList').val() // Option value 
$('#yourSelectList :selected').text() // Option text value

如果你看看PicNet表格过滤插件，他们有两个选择，从表格内部和外部过滤。我试图在表格外使用选项select来过滤列。 – Jeffrey 2010-05-20 17:04:10

答

Just made a small example for you to try out。只是一个概念的快速证明。

<select id="filter"> 
    <option value="dogs">dogs</option> 
    <option value="cats">cats</option> 
</select> 

<table id="boing" border="1"> 
<tr> 
<th>header</th> 
</tr> 
<tr> 
<td>dogs</td> 
</tr> 
<tr> 
<td>dogs</td> 
</tr> 
    <tr> 
<td>cats</td> 
</tr> 
    <tr> 
<td>cats</td> 
</tr> 
    <tr> 
<td>dogs</td> 
</tr> 
</table>

而jQuery的：

$("#filter").change(function(){ 
    $("#boing").find("td").each(function(){ 
     if($(this).text() != $("#filter").val()) $(this).hide(); 
     else $(this).show(); 
    }); 
});

如果你想隐藏/显示整个行，做$(this).parent().hide()和$(this).parent().show()

有一点要记住的是，如果你想要做的一个检查每行中所有TD的下拉列表，你将不得不调整代码，以便只有在没有任何tds匹配下拉菜单时才会隐藏该行。类似this。

<select id="filter"> 
    <option value="dogs">dogs</option> 
    <option value="cats">cats</option> 
</select> 

<table id="boing" border="1"> 
<tr> 
<th>header</th> 
</tr> 
<tr> 
<td>dogs</td> 
<td>dogs</td> 
</tr> 
<tr> 
<td>dogs</td> 
<td>cats</td> 
</tr> 
    <tr> 
<td>cats</td> 
<td>dogs</td> 
</tr> 
    <tr> 
<td>cats</td> 
<td>cats</td> 
</tr> 
    <tr> 
<td>dogs</td> 
<td>cats</td> 
</tr> 
</table>

而jQuery的：

$("#filter").change(function(){ 
    $("#boing").children('tbody').children('tr').not(':first').each(function(){ 
     var match = false; 
     $(this).children('td').each(function() { 
      if($(this).text() == $("#filter").val()) match = true; 
     }); 
     if(match) $(this).show(); 
     else $(this).hide(); 
    }); 
});

如何隐藏整行？ http://jsfiddle.net/B7hMk/ – Jeffrey 2010-05-20 17:16:26

如果你为每一列添加一个选择框，你将如何调整你的代码？卡住了！ – Ismailp 2012-02-29 20:51:42

首先感谢bradley，@Jeffrey我在这里做了一个样本行：http://jsfiddle.net/BCreb/87/ - http://stackoverflow.com/questions/9878157/cant-get-tablesorter-checkbox - 过滤到工作/ 9882155＃9882155希望它有帮助，欢呼声 – 2012-03-27 02:00:26

带文本，复选框和选择的jQuery表格过滤器

相关推荐