jQuery DataTables: how to filter DOM rows, when clicking checkboxes?

Question

I have prepared a simple test case for my question.

Just save it to a disk and open in the browser - it will work instantly, you don't have to download or install anything.

Here is the screenshot for my test case:

screenshot

My question is: how could I filter the rows in the table, when the user selects fruit and/or candy? What function to call here, fnDraw()?

My test file index.html:

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

Thank you for any hints!

UPDATE: I've asked at the DataTables forum too.

Alexander Farber · Accepted Answer · 2013-01-25 15:04:33Z

Here is my own solution using afnFiltering, it works well.

I didn't like fbas' solution using fnFilter, because this causes the search string to be displayed in the search field. (But still thanks for your suggestion).

<html>
<head>
<style type="text/css" title="currentStyle">
        @import "http://ajax.googleapis.com/ajax/libs/jqueryui/1/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://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/jquery.dataTables.min.js"></script>
<script type="text/javascript">

$.fn.dataTableExt.afnFiltering.push(
        function(oSettings, aData, iDataIndex) {
                var isFruit = (aData[0] == 'fruit');
                return (isFruit ? $('#fruit').is(':checked') :
                                  $('#candy').is(':checked'));
        }
);

$(function() { 
        var my_table = $('#my_table').dataTable( {
                bJQueryUI: true,
                aoColumns: [
                        /* type */  { bVisible: false, 
                                      bSearchable: false },
                        /* thing */ null
                ],

        });

        $(':checkbox').click(function() {
                my_table.fnDraw();
        });
});

</script>
</head>
<body>

<p>What should be shown:</p>
<p><label><input type="checkbox" id="fruit">fruit</label></p>
<p><label><input type="checkbox" id="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>

fbas · Accepted Answer · 2011-11-09 17:50:11Z

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

answered Nov 9, 2011 at 17:50

fbas

1,6843 gold badges17 silver badges26 bronze badges

1 Comment

Alexander Farber Over a year ago

Thank you, I'm working through examples and maybe I better use $.fn.dataTableExt.afnFiltering as in datatables.net/release-datatables/examples/plug-ins/… and then call fnDraw()

Collectives™ on Stack Overflow

jQuery DataTables: how to filter DOM rows, when clicking checkboxes?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related