DataTables.net - Custom Column Filter Plugin

HTML

<script src="//cdn.datatables.net/plug-ins/1.10.11/api/fnMultiFilter.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
  <h1>Custom Column Filter Plugin - DataTables.net</h1>

  <fieldset>
    <legend>Filter Fields</legend>

    <div id="renderingEngineFilter"></div>

    <div id="browserFilter"></div>

    <div id="platformsFilter"></div>

    <div id="engineVersionFilter"></div>

    <div id="customFilter"></div>
  </fieldset>

  <div id="demo">
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
      <thead>
        <tr>
          <th>Rendering engine</th>

          <th>Browser</th>

          <th>Platform(s)</th>

          <th>Engine version</th>

          <th>CSS grade</th>
        </tr>
      </thead>

      <tfoot>
        <tr>
          <th>Rendering engine</th>

          <th>Browser</th>

          <th>Platform(s)</th>

          <th>Engine version</th>

          <th>CSS grade</th>
        </tr>
      </tfoot>

      <tbody>
        <tr class="odd_gradeX" id="2">
          <td class="read_only">Trident</td>

          <td>Internet Explorer 4.0</td>

          <td>Win 95+</td>

          <td class="center">4</td>

          <td class="center">X</td>
        </tr>

        <tr class="even_gradeC" id="4">
          <td>Trident</td>

          <td>Internet Explorer 5.0</td>

          <td>Win 95+</td>

          <td class="center">5</td>

          <td class="center">C</td>
        </tr>

        <tr class="odd_gradeA" id="5">
          <td>Trident</td>

          <td>Internet Explorer 5.5</td>

          <td>Win 95+</td>

          <td class="center">5.5</td>

          <td class="center">A</td>
        </tr>

        <tr class="even_gradeA" id="1">
          <td>Trident</td>

          <td...

CSS

fieldset{
    border: 1px solid #ccc;
    margin: 10px 20px;
    padding: 10px;
    width: 300px;
}
legend{
    border: 1px solid #aaa;
    font-weight: bold;
    padding: 2px 5px;
}

JavaScript

$(document).ready(function() {
jQuery.fn.dataTableExt.oApi.fnMultiFilter = function( oSettings, oData ) {
    for ( var key in oData )
    {
        if ( oData.hasOwnProperty(key) )
        {
            for ( var i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
            {
                if( oSettings.aoColumns[i].sName == key )
                {
                    /* Add single column filter */
                    oSettings.aoPreSearchCols[ i ].sSearch = oData[key];
                    break;
                }
            }
        }
    }
    this.oApi._fnReDraw( oSettings );
};

   var table = $('#example').dataTable( {
          "aoColumns": [
              { "sName": "engine" },
              { "sName": "browser" },
              { "sName": "platform" },
              { "sName": "version" },
              { "sName": "grade" }
          ]
      } );
      //table.fnMultiFilter( { "engine": "Gecko", "browser": "Cam" } );
      table.fnMultiFilter( { "engine": "", "browser": "saf" } );
    
});