DOM-filtering when clicking on a checkbox

DOM-filtering when clicking on a checkbox

edited November 2011 in General Posts: 52
Hello!

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 "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css"; </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>; <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>; <script type="text/javascript" src="https://raw.github.com/DataTables/DataTables/master/media/js/jquery.dataTables.js"></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
http://stackoverflow.com/questions/8052976/jquery-datatables-how-to-filter-dom-rows-when-clicking-checkboxes

Thank you for any suggestions
Alex

Replies

  • 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

    http://www.datatables.net/ref#fnFilter
This discussion has been closed.