Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82108

using checkboxes to filter

$
0
0
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+.

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

Viewing all articles
Browse latest Browse all 82108

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>