DOM-filtering when clicking on a checkbox

afarber

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):

[code]



@import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css";







$(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');
});
});





What should be shown:
fruit
candy




Type
Thing



fruitapple
fruitbanana
fruitpear
candyjelly
candytoffee
candyfudge




[/code]

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

fbas

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