如果未找到结果，如何在 DataTables 上隐藏表页脚？答案

【问题标题】：How to hide table footer on DataTables if no results found?如果未找到结果，如何在 DataTables 上隐藏表页脚？
【发布时间】：2020-05-28 20:26:03
【问题描述】：

我正在使用预览中附加的通用数据表。如果数据表搜索没有返回结果，我正在寻找的是隐藏 tfoot 。例如，如果您在附加的数据表搜索中键入 5000，它将返回“未找到匹配记录”，因为没有结果我不想显示 tfoot，因为在 tfoot 中它是所有可用数据的总和桌子。但如果没有数据，我认为显示 tfoot 本身是没有意义的。

这样可以吗？如果有，怎么做？

$(document).ready( function () {
    $('#data-table').DataTable();
} );

.table-row-payment {
    background-color: #f1f5f7 !important;
    font-weight: 700;
    color: #444444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

<!-- START OF DATA TABLE -->
<div class="table-responsive">
  <!-- Table -->
  <table class="table" id="data-table">
    <!-- Table Headings -->
    <thead class="table-header">
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Date</th>
        <th scope="col">Type</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1000</td>
        <td>02/02/2020</td>
        <td>Hello</td>
      </tr>
    </tbody><!-- END OF TABLE BODY -->
    <tfoot class="table-row-payment">
      <tr>
        <th scope="col">Total</th>
        <th scope="col"></th>
        <th scope="col">$0.00</th>          
      </tr>
    </tfoot><!-- END OF TABLE FOOTER -->
  </table><!-- END OF TABLE -->
</div><!-- END OF DATA TABLE -->

【问题讨论】：

标签： javascript jquery datatable

【解决方案1】：

我找到了我的问题的解决方案，并将其发布在下面。

// Hide tfoot when table search returns empty
$('body').on('keyup', '.noResults', function () {
 if ($("td.dataTables_empty").length) {
  $('tfoot.table-row-payment > tr').hide();
  } else {
  $('tfoot.table-row-payment > tr').show();
}
});

我认为这可能对其他人有所帮助。

【讨论】：