title: Search or filter a column in jquery datatable using multi select dropdown with checkbox
body: <p>I am trying to filter or search a column in jquery datatable using multiselect checkbox drop down. Suppose for example if it is a city column, the table should filter or search if I check two cites as per checkbox drop down and display the result for the checked cites in drop down. I tried lot of ways to find solution but, i couldn't crack it upto now. if anyone can help in solving this it is greatly appreciated. Thanks in advance. I am just putting jquery code below for your reference.</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;jQuery Datatable&lt;/title&gt;
  
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"&gt;
  
      &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"&gt;
  
      &lt;link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"&gt;
  
      &lt;!-- &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt; --&gt;
  
      &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          * {
              margin:0;
              padding: 0;
          }
          #wrap {
              width: 100%;
              margin: auto;
          }
          .addcolr {
              color: green;
          }
      &lt;/style&gt;
      &lt;script&gt;
          /*$(document).ready(function() {
          $('#example th').each(function() {
              alert(this.textContent);
          });
      });*/
          $(document).ready(function() {
            $('#example').DataTable({
  
              "bFilter": true,
              initComplete: function () {
              this.api().columns(2).every( function () {
                  var column = this;
                  var select = $('&lt;select id="sel_dropdown" multiple="multiple"&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
                      .appendTo( $(column.footer()).empty() );
                      /*.on( 'change', function () {
                          var val = $.fn.dataTable.util.escapeRegex(
                              $(this).val()
                          );
  
                          column
                              .search( val ? '^'+val+'$' : '', true, false )
                              .draw();
                      } );*/
  
                  column.data().unique().sort().each( function ( d, j ) {
                      select.append( '&lt;option value="'+d+'"&gt;'+d+'&lt;/option&gt;' )
                  } );
                } );
              }
  
            });
  
            $('#example tbody tr td:nth-child(4)').each( function(){
  
              if($(this).text() == 61) {
                    $(this).css("color","red");
              }
              else if($(this).text() == 47) {
                    $(this).addClass("addcolr");
              }
             });
  
            //multiselect
            $('#sel_dropdown').multiselect();
  
            // $('#example').DataTable();
  
            $('#sel_dropdown').change( function () { 
                  $('#example').DataTable().fnFilter( $('#sel_dropdown').val(),2);
              });
  
          } );
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrap"&gt;&lt;/div&gt;&lt;/body&gt;
  </code></pre>