与文本，复选框，选择jQuery表格过滤器 [英] jQuery table filter with text, checkboxes, selects

问题描述

需要从表格外部过滤表格，并进行文本搜索，复选框和选择。 适用于jQuery的PicNet表格过滤器适用于搜索和使用复选框表...虽然我找不到任何如何让选择框工作的例子。任何人都知道吗？

**我可能在这里变得太具体了，但是至少我想问一下。*

我也开放给除PicNet以外的其他可能性。

已更新：这里是我的代码，

 < 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.jstype =text / javascript>< / script> 
< script type =text / javascriptsrc =picnet.table.filter.min.js>< / script> 
 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 //随机创建数据行
 
 
 //初始化插件
 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;颜色：＃666; padding：3px 5px 3px 5px} 
 th {background-color：＃333;颜色：#FFF; font-size：0.85em} 
 a {color：grey; } 
 .filtering {background-color：light-grey} 
 #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>表1的其他过滤条件< / b>< br /> 
只显示是：< input type =checkboxid =onlyyes/> 
只显示否：< input type =checkboxid =onlyno/> 
只显示项目1：< input type =checkboxid =itemone/> 
< br /> 
快速查找：< input type =textid =quickfind/> 
< br /> 
< a id =cleanfiltershref =＃>清除过滤器< / a> 
< br />< b>表1< / b>< br /> 
< table id ='demotable1'> 
< thead> 
< tr>< th>< th>>< th> th filter>< th> th< th> th filter> '> List Column< th style ='width：100px;'filter ='false'> No Filter< th>< th>日期列< th filter ='false '>空< th>< th class =hiddenfilter ='false'>< / th>< / tr> 
< / thead> 
< tbody> 
< tr> 
< td>值102< / td> 
< td> 420< / td> 
< td>是< / td> 
< td>项目1< / td> 
< td> hello< / td> 
< td> 01/11 // 2009< / td> 
< td>< / td> 
< td class =hidden> Ed Head< / td> 
< / tr> 
< tr> 
< td>值134< / td> 
< td> 987< / td> 
< td> no< / td> 
< td>第2项< / td> 
< td> hi< / td> 
< td> 03/11 // 2009< / td> 
< td>< / td> 
< td class =hidden> Joe Blow< / td> 
< / tr> 
< tr> 
< td>值654< / td> 
< td> 722< / td> 
< td>是< / td> 
< td>第3项< / td> 
< td> hello< / td> 
< td> 04/11 // 2009< / td> 
< td>< / td> 
< td class =hidden> Jimmy< / td> 
< / tr> 
< / tbody> 
< / table> 
 
< / body> 
< / html> 
  

解决方案

刚刚做了个小例子让你试用。

 < select id =filter> 
< option value =dogs> dogs< / option> 
< option value =cats>猫< / option> 
< / select> 
 
< table id =boingborder =1> 
< tr> 
< th>标题< / th> 
< / tr> 
< tr> 
< td>狗< / td> 
< / tr> 
< tr> 
< td>狗< / td> 
< / tr> 
< tr> 
< td>猫< / td> 
< / tr> 
< tr> 
< td>猫< / td> 
< / tr> 
< tr> 
< td>狗< / td> 
< / tr> 
< / table> 
  

和jQuery：

 $（＃boing）。find（td）。each（function（）{
如果（$（this）.text（）！= $（＃filter）.val（））$（this）.hide（）; 
 else $（this）.show（）; $ b $如果你想要隐藏/显示整个图像（） $（this）.parent（）。hide（）和 $（this）.parent（）。show（） $ b 
有一件事要记住，如果你想做一个下拉菜单来检查每一行的所有TD，你必须调整代码只有在没有任何tds匹配下拉菜单的情况下，它才会隐藏该行。像这个。
 < select id =filter> 
< option value =dogs> dogs< / option> 
< option value =cats>猫< / option> 
< / select> 
 
< table id =boingborder =1> 
< tr> 
< th>标题< / th> 
< / tr> 
< tr> 
< td>狗< / td> 
< td>狗< / td> 
< / tr> 
< tr> 
< td>狗< / td> 
< td>猫< / td> 
< / tr> 
< tr> 
< td>猫< / td> 
< td>狗< / td> 
< / tr> 
< tr> 
< td>猫< / td> 
< td>猫< / td> 
< / tr> 
< tr> 
< td>狗< / td> 
< td>猫< / td> 
< / tr> 
< / table> 
  
和jQuery： 
 
 
 $（＃boing）。children（'tbody'）。 （）（）{
 var match = false; 
 $（this）.children（'td'）。each（function（）{
 if（$ （$）$（this）.show（）; 
 $ $（this）.hide（）; 
}）; 
}）; 
  
 
Need to filter a table from outside of the table, with a text search, checkboxes, and selects. PicNet Table Filter for jQuery works for both searching and using checkboxes outside of the table... though I can't find any examples of how to get a select box to work. Anyone know?

**I might be getting too specific here, but thought I'd at least inquire.*

I'm also open to possibilities other than PicNet.

UPDATED: Here's my code so far, I'd like an option select at the top of the body by the two yes/no checkboxes.
<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>

解决方案
Just made a small example for you to try out.  Just a quick proof of concept.
<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>
And the jQuery:
$("#filter").change(function(){
    $("#boing").find("td").each(function(){
        if($(this).text() != $("#filter").val()) $(this).hide();
        else $(this).show();
    });
});​
If you want to hide/show the whole row, do $(this).parent().hide() and $(this).parent().show()

One thing to keep in mind is that if you want to do a dropdown that checks all TD's in each row, you will have to tweak the code so that it will only hide the row if NONE of the tds match the dropdown.  Something like 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>
And the 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();
    });
});​


                        
这篇关于与文本，复选框，选择jQuery表格过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！