Checkbox Filtering

renzosilv

Hi:
I would like to add a checkbox next to the search box to be used as a filter. I currently have two datatables on a page and the only difference is one has only items that belong to the user and the second one is for everyone. I would like to clean up the page by combining both tables but have a quick filter aka checkbox to switch the general table into the one that only have your items.
One of the columns has a phone number so I know I could just type that but I would like to have a check box to automatical filter it for me.
If anyone has any examples to get me started I would appreciate it.
Regards,
Renzo

robertbrower

Assuming your table contains a column at index 0 that contains Y or N if the row belongs to everyone or not and the checkbox is named "everyone", you might try:
[code]
var everyone = $("input[name='everyone']:checked");
$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
return everyone && oSettings.aoData[iDataIndex]._aData[0] == "Y";
});
[/code]

Chytkam

$("#mycheckbox").click(function() {
if ($("#mycheckbox").is(":checked")) {
aTable.fnFilter('503-123-4567', 11, true, false);
} else {
aTable.fnFilter('', 11, true, false);
}
});


Your checkbox needs an id of mycheckbox, your table is aTable (or change that) and the column that you are filtering is column 11. Adjust the 11 to the column you want to filter from your table and substitute the fake phone number i listed 503-123-4567 for the value that you want to filter. Anytime the checkbox is checked, that column will be filtered, if unchecked it will filter the column with '' hence nothing.

You can also do the same thing with select boxes

$('#myselectbox').change(function() {
var selectboxvalue = $("#myselectbox option:selected").val();
aTable.fnFilter(selectboxvalue, 11, true, false);
});

Then you can make a large select box with multiple filter values so its not just a binary checkbox, i use this to filter my tables by state, WA, OR, CA, FL ect.... column 11 will be filtered by the value of the selectbox named myselectbox.


Both of the above jquery need to be loaded inside your document ready function.

renzosilv

That worked like a charm!
Thank you very much for taking the time to answer my question. :-D

Chytkam

Glad it worked, if you get stuck on anything else shoot me a message and Ill see if i can help.

renzosilv

Thanks Chytkam! That's very kind of you. :-)

robertk

1 question. So I added the suggested #mycheckbox javascript in the document.ready function and
[code]

RF

[/code]

But the thing doesn't work. Though my dataTable is not that simple,

[code]
$(document).ready(function() {

$("#mycheckbox").click(function() {
if ($("#mycheckbox").is(":checked")) {
aTable.fnFilter('RF', 18, true, false);
alert("hello");
} else {
aTable.fnFilter('', 18, true, false);
}
});

$('#example').dataTable( {
"bPaginate": false,
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 1, 2, 4, 9, 10, 12, 14, 17, 18 ] },
{ "sWidth": "2%", "aTargets": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ] } ],
"sDom": 'T<"clear">C<"clear">frti' ,
...

[/code]

So what's missing here? Any ideas?

Thanks,
--Rob

robertk

Got it worked out. It seems the order for which things are defined is quite important.