DOM-filtering when clicking on a checkbox

DOM-filtering when clicking on a checkbox

afarberafarber Posts: 53Questions: 0Answers: 0
edited November 2011 in General
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

Replies

  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    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.