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+.
then the html
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+.
$.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);
});
});
then the html
<label style="white-space: nowrap;">
<input type="checkbox" name="types[]" id="typeGecko" value="Gecko">Gecko</label>
<label style="white-space: nowrap;">
<input type="checkbox" name="types[]" id="typeTrident" value="Trident">Trident</label>
<label style="white-space: nowrap;">
<input type="checkbox" name="types[]" id="typePresto" value="Presto">Presto</label>