【发布时间】：2011-02-21 23:30:18
【问题描述】：
需要使用文本搜索、复选框和选择从表格外部过滤表格。 PicNet Table Filter for jQuery 适用于搜索和使用表格外的复选框...尽管我找不到任何有关如何使选择框起作用的示例。有人知道吗？
**我可能在这里说得太具体了，但我想我至少会询问一下。*
我也对 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.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 链接到不错的插件。
标签： jquery search filter html-table tablefilter