如果未找到结果，如何隐藏数据表上的表页脚?

Question

我正在使用预览中附加的通用数据表。我正在寻找的是，如果数据表搜索未返回任何结果，则隐藏 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 -->

Answer 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();
}
});

我认为这可能会帮助其他人。