Geek Answers Handbook

JQuery filter table with text, check boxes, selection

It is necessary to filter the table from outside the table, with text search, checkboxes and selections. PicNet Table Filter for jQuery works both for searching and for using checkboxes outside the table ... although I can’t find examples of how to get a selection box to work with. Somebody knows?

** I might be too specific here, but thought I would at least ask. *

I also discover features other than PicNet.

UPDATED : here is my code so far, I would like the selection to be selected at the top of the body with two yes / no flags.

<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>
+6
jquery filter html-table search
source share
2 answers

Just made a small example for you to try . 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 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 line, do $(this).parent().hide() and $(this).parent().show()

Keep in mind that if you want to create a drop-down list that checks all TDs in each row, you will have to configure the code to hide the row if NONE from tds matches the drop-down list. 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 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(); }); });​
+2
source share

I have no idea what you are trying to do ("Need to filter the table from outside the table" - wtf means that?). But if you are trying to get the value of a select box using jQuery:

 $('#yourSelectList').val() // Option value $('#yourSelectList :selected').text() // Option text value
-2
source share

More articles:


All Articles