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>
