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>