using checkboxes to filter

richardsonja

I saw a lot of different forum posts asking about using check boxes to filter a data table. between 3 or 4 posts here and stock overflow, I've figured out one way to do it and wanted to share with the community!

The next question I have is can I filterAll on different columns independently. =) For example by Engine and then by Platform. so Gecko and Win 98+.

[code]
$.fn.dataTableExt.oApi.fnFilterAll = function (oSettings, sInput, iColumn, bRegex, bSmart) {
var settings = $.fn.dataTableSettings;

for (var i = 0; i < settings.length; i++) {
settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
}
};

$(document).ready(function () {
//its important to throw in into aTable (or any name you give it)
var aTable = $('#example').dataTable({
"bStateSave": false,
"sPaginationType": "full_numbers",
"oLanguage": { "sSearch": "Filter:" },
"bJQueryUI": true
});

$("input[name='types[]']").click(function () {
var stringofstuff = "";
var firstChecked = true;
$.each($("input[name='types[]']"), function () {
if ($(this).is(":checked")) {
if (firstChecked) {
stringofstuff += $(this).val();
firstChecked = false;
} else {
//add the OR operator
stringofstuff += "|" + $(this).val();
}
}
});
//2nd parameter is the column to filter
aTable.fnFilterAll(stringofstuff, 0, true, false);
});
});
[/code]

then the html
[code]

Gecko

Trident

Presto
[/code]

richardsonja

While using this script, i did find that i had to change the ID of the table to match the class. i usually use class since it is easier in the asp.net web form world.

I'm not sure if that was the exact issue but when i did that, it started working >_<

richardsonja

you might have to turn off the bStateSave. otherwise you will have some confused users. if anyone has an idea on how to save the check box state, that would be great =)

allan

> if anyone has an idea on how to save the check box state, that would be great =)

You need a bit of custom code to do that, since obviously DataTables doesn't know anything about the checkboxes. You could use fnStateSaveParams and fnStateLoadParams to hook into the DataTables state saving code.

Allan

richardsonja

Thanks Allan. I'll give that a try at some point.

I do have another question about this. i have a page with three datatables. each one being loaded into different varaibles (oTable, oclientTable, oFullProductTable). however the filter affects all three of them. how do i limit the execution of the fnFilterAll to just a single table?

here is the code:
[code]
$.fn.dataTableExt.oApi.fnFilterAll = function (oSettings, sInput, iColumn, bRegex, bSmart) {
//alert(oSettings + "|" + sInput + "|" + iColumn + "|" + bRegex + "|" + bSmart);
var settings = $.fn.dataTableSettings;

for (var i = 0; i < settings.length; i++) {
settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
}
};
$(document).ready(function () {
var stringofstuff = "";
var firstChecked = true;
$.each($("input[name='status[]']"), function () {
if ($(this).is(":checked")) {
if (firstChecked) {
stringofstuff += $(this).val();
firstChecked = false;
} else {
stringofstuff += "|" + $(this).val();
}
}
});

var oFullProductTable = $('.ProjectList').dataTable({
"bStateSave": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers"

});


var oclientTable = $('.ClientList').dataTable({
"bStateSave": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers"

});

var oTable = $('.ListOfWatchListProjects').dataTable({
"bStateSave": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});

oTable.fnFilterAll(stringofstuff, 3, true, false);

});
[/code]