title: How to hide table footer on DataTables if no results found?
body: <p>I'm using the generic dataTable attached in the preview. What I'm looking for is to hide the tfoot if the data table search returns no results. For example, if you type 5000 in the attached data tables search it will return "No matching records found" as there will be no results I don't want to show the tfoot because in tfoot it is the sum of all the data available in the table. But if there's no data I don't think it makes sense to display the tfoot itself.</p>
  
  <p>Is this possible to do it? If so, how?</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 () {
      $('#data-table').DataTable();
  } );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table-row-payment {
      background-color: #f1f5f7 !important;
      font-weight: 700;
      color: #444444;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  &lt;script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
  crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"&gt;
  
  &lt;!-- START OF DATA TABLE --&gt;
  &lt;div class="table-responsive"&gt;
    &lt;!-- Table --&gt;
    &lt;table class="table" id="data-table"&gt;
      &lt;!-- Table Headings --&gt;
      &lt;thead class="table-header"&gt;
        &lt;tr&gt;
          &lt;th scope="col"&gt;ID&lt;/th&gt;
          &lt;th scope="col"&gt;Date&lt;/th&gt;
          &lt;th scope="col"&gt;Type&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;1000&lt;/td&gt;
          &lt;td&gt;02/02/2020&lt;/td&gt;
          &lt;td&gt;Hello&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;&lt;!-- END OF TABLE BODY --&gt;
      &lt;tfoot class="table-row-payment"&gt;
        &lt;tr&gt;
          &lt;th scope="col"&gt;Total&lt;/th&gt;
          &lt;th scope="col"&gt;&lt;/th&gt;
          &lt;th scope="col"&gt;$0.00&lt;/th&gt;          
        &lt;/tr&gt;
      &lt;/tfoot&gt;&lt;!-- END OF TABLE FOOTER --&gt;
    &lt;/table&gt;&lt;!-- END OF TABLE --&gt;
  &lt;/div&gt;&lt;!-- END OF DATA TABLE --&gt;</code></pre>
  </div>
  </div>
  </p>