DOM-filtering when clicking on a checkbox

DOM-filtering when clicking on a checkbox

edited November 2011 in General Posts: 52

How do you hide certain rows in a table with DOM-data
based on checkbox values (outside the table)?

I have prepared a simple test case demonstrating my question -
it is just 1 file, instantly runnable (no additional downloads required):

<html> <head> <style type="text/css" title="currentStyle"> @import ""; </style> <script type="text/javascript" src=""></script>; <script type="text/javascript" src=""></script>; <script type="text/javascript" src=""></script>; <script type="text/javascript"> $(function() { var my_table = $('#my_table').dataTable( { bJQueryUI: true, aoColumns: [ /* type */ { bVisible: false, bSearchable: false }, /* thing */ null ] }); $(':checkbox').click(function() { alert('XXX what to do here? XXX'); }); }); </script> </head> <body> <p>What should be shown:</p> <p><label><input type="checkbox" value="fruit">fruit</label></p> <p><label><input type="checkbox" value="candy">candy</label></p> <table id="my_table"> <thead> <tr> <th>Type</th> <th>Thing</th> </tr> </thead> <tbody> <tr><td>fruit</td><td>apple</td></tr> <tr><td>fruit</td><td>banana</td></tr> <tr><td>fruit</td><td>pear</td></tr> <tr><td>candy</td><td>jelly</td></tr> <tr><td>candy</td><td>toffee</td></tr> <tr><td>candy</td><td>fudge</td></tr> </tbody> </table> </body> </html>
and you can see the screenshot at

Thank you for any suggestions


  • Posts: 1,083
    add a handler to your checkboxes (on change) that iterates through the checkboxes, create a search string (with regular expressions) that you pass into fnFilter for the 'type' column

    i.e. if "fruit" is checked, fnFilter will receive "^fruit$"
    i.e. if "candy" is checked, fnFilter will receive "^candy$"
    i.e. if both are checked, fnFilter will receive "^candy$|^fruit$"

    call fnFilter with the search string for that column, but also setting 3rd param to 'true' for reg expression filtering
This discussion has been closed.