title: jQuery DataTables: hide search bar
body: <p>I seem not able to hide DataTables default search bar. So far, I have tried solution from <a href="https://stackoverflow.com/questions/1920600/how-can-i-remove-the-search-bar-and-footer-added-by-the-jquery-datatables-plugin">this</a> thread, but setting <code>bFilter:false</code> disables filtering entirely, so my search boxes in the footer simply do not work any longer.</p>
  
  <p>I have put up <a href="http://jsfiddle.net/rg78o9z3/" rel="noreferrer">jsfiddle</a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;thead&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"&gt;
      &lt;script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;table id="mytable"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;name&lt;/th&gt;
                  &lt;th&gt;type&lt;/th&gt;
                  &lt;th&gt;color&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;apple&lt;/td&gt;
                  &lt;td&gt;fruit&lt;/td&gt;
                  &lt;td&gt;red&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;banana&lt;/td&gt;
                  &lt;td&gt;fruit&lt;/td&gt;
                  &lt;td&gt;yellow&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;carrot&lt;/td&gt;
                  &lt;td&gt;vegie&lt;/td&gt;
                  &lt;td&gt;red&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;potato&lt;/td&gt;
                  &lt;td&gt;vegie&lt;/td&gt;
                  &lt;td&gt;brown&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>and jQuery code:</p>
  
  <pre><code>$(document).ready(function(){
      let table = $('#mytable').DataTable();
    $('#mytable tfoot th').each( function (i) {
          let title = $('#mytable thead th').eq( $(this).index() ).text();
          $(this).html( '&lt;input type="text" placeholder="Search '+title+'" data-index="'+i+'" /&gt;' );
      } );
    $( table.table().container() ).on( 'keyup', 'tfoot input', function () {
      table
        .column( $(this).data('index') )
        .search( this.value )
        .draw();
    } );
  });
  </code></pre>
  
  <p>Any help is much appreciated.</p>