Menu
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>
795
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();
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
