title: How to hide a table upon page load and then display filtered data with table headers?
body: <p>Upon loading my table page, I want the table to be completely hidden.When I load the page, I want to filter the data and display the headers and related data based on the selected filter.</p>
  <p>I am able to hide the table upon page  load as well as filter it.
  My issue:</p>
  <ol>
  <li>Although the filter works, I am having trouble displaying the headers along with the related rows when Select Location is selected.</li>
  <li>I would like to remove the gray line that appears upon page load.</li>
  </ol>
  <p>Please see the sample code here: <a href="http://live.datatables.net/milazige/6/edit" rel="nofollow noreferrer">http://live.datatables.net/milazige/6/edit</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    // hide tbody on load
  $('#example tbody').hide();
  $('#example thead').hide();
  
      var table = $('#example').DataTable({
          paging: false,
      searching: true,
      lengthChange: false,
  responsive: false,
  scrollX: true,
      bInfo: false,
      bSort: false,
      "language": {
      "zeroRecords": ""
    }
    });
  
    $('#table-filter').on('change', function () {
      // show the tbody when the user clicks on a filter option
  $('#example thead').show();
      $('#example tbody').show();
  
      table.search(this.value).draw();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dataTables_wrapper .dataTables_filter {
  padding-bottom: 16px;
   display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  
      &lt;link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="https://nightly.datatables.net/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  
      &lt;meta charset=utf-8 /&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
   &lt;p&gt;Select: &lt;select id="table-filter"&gt;
  &lt;option&gt;Location&lt;/option&gt;
  &lt;option&gt;Dallax, TX&lt;/option&gt;
  &lt;option&gt;Boston, MA&lt;/option&gt;
  &lt;option&gt;Sandy, UT&lt;/option&gt;
  &lt;option&gt;Washington, DC&lt;/option&gt;
  &lt;option&gt;Omaha, NE&lt;/option&gt;
  &lt;/select&gt;
  &lt;/p&gt;
  
  &lt;table id="example" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"&gt;&lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Location&lt;/th&gt;
  &lt;th&gt;Name&lt;/th&gt;
  &lt;th&gt;Job&lt;/th&gt;
  &lt;th&gt;Salary&lt;/th&gt;
  &lt;/tr&gt;
  
  &lt;/thead&gt;&lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;Dallax, TX&lt;/td&gt;
  &lt;td&gt;test1&lt;/td&gt;
  &lt;td&gt;5&lt;/td&gt;
  &lt;td&gt;16&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;Boston, MA&lt;/td&gt;
  &lt;td&gt;test2&lt;/td&gt;
  &lt;td&gt;test2&lt;/td&gt;
    &lt;td&gt;test2&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;Sandy, UT&lt;/td&gt;
  &lt;td&gt;test3&lt;/td&gt;
  &lt;td&gt;test3&lt;/td&gt;
  &lt;td&gt;test3&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;Washington, DC&lt;/td&gt;
  &lt;td&gt;test4&lt;/td&gt;
  &lt;td&gt;test4&lt;/td&gt;
  &lt;td&gt;test4&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;Omaha, NE&lt;/td&gt;
  &lt;td&gt;test5&lt;/td&gt;
  &lt;td&gt;test5&lt;/td&gt;
  &lt;td&gt;test5&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/tbody&gt;&lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>