没有数据时如何制作不可见的数据表？答案

【问题标题】：How to make invisible datatable when there is no data?没有数据时如何制作不可见的数据表？
【发布时间】：2013-10-18 06:29:21
【问题描述】：

当表格里面没有任何数据（行）时，是否可以隐藏表格？我正在使用查询数据表插件。

我在documentation 中找不到任何选项。

【问题讨论】：

标签： javascript jquery css datatables jquery-datatables

【解决方案1】：

尽管有很好的建议，但我认为仍然需要（另一个）答案。

使用 dataTables 时，<table> 永远不会为空 - 或 :empty - 因为 dataTables 强制您拥有 <thead> 和 <tbody>
隐藏<table>是不够的，你还必须隐藏*_wrappper - <div>包含样式表、分页、过滤框等。

您可以利用fnInitComplete：

$('#table').dataTable({
   //initialization params as usual
   fnInitComplete : function() {
      if ($(this).find('tbody tr').length<=1) {
         $(this).parent().hide();
      }
   } 
});

这将隐藏 dataTable 及其所有自动生成的内容，如果<tbody> 中没有保存数据的行。

更新

[请参阅 cmets 进行澄清] 然后您需要一种完全不同的方法。这适用于 Chrome 和 FireFox，不能告诉 IE：

忘记fnInitComplete，改用以下代码：

var dataTable = $('#table').dataTable();

$("#table").on('DOMNodeInserted DOMNodeRemoved', function() {
  if ($(this).find('tbody tr td').first().attr('colspan')) {
    $(this).parent().hide();
  } else {
    $(this).parent().show();
  }
});

//this shows the dataTable (simplified)
dataTable.fnAddData(
    ['a','b','c','d','e']
);

//this hides it (assuming there is only one row)
dataTable.fnDeleteRow(0);

【讨论】：

这是一个更好的答案，但仍然存在问题。我动态添加或删除 tr，那么是否可以使其适用于每个数据操作？当我删除必须隐藏的最后一行表格或添加第一行表格时必须显示。
@ocanal，你在使用 fnAddData / fnDeleteRow 吗？

【解决方案2】：

if($('#mytable tbody .dataTables_empty').length){
    $('#mytable_wrapper').hide()
}

看到只是因为我的 id 是 mytable 包装器被称为 mytable_wrapper 所以如果你的表 id 是bla 它将是 bla_wrapper

【讨论】：

【解决方案3】：

我发现这也有效：

$('#table').dataTable({
    fnDrawCallback : function() {
        if ($(this).find('.dataTables_empty').length == 1) {
           $(this).parent().hide();
        }
    }
});

警告：如果您搜索但没有结果，它将隐藏整个表格。

【讨论】：

这很好用。您可能需要添加 } else { $(this).parent().show(); } 以在清除搜索字段时恢复表格。

【解决方案4】：

我使用绘图事件，每次我的数据表更改时，它都会检查是否有数据：

var table = $('#example').DataTable();

table.on('draw', function () {
    if (table.data().any()) {
        $(this).parent().show();
    } else {
        $(this).parent().hide();
    }
});

【讨论】：

【解决方案5】：

使用数据表时，它会插入一行，告诉您没有要显示的数据，因此您需要检查一下。在您调用填充表格后，直接添加此...

if ($(".dataTables_empty").length) {
    $(".dataTables_wrapper").hide();
}

【讨论】：

【解决方案6】：

如果你想隐藏表格，当其中没有任何子标签时（我的意思是当它是时）你可以使用来自 css 的伪类:empty。

类似的东西：

table:empty {display: none}

【讨论】：

【解决方案7】：

$(document).ready(function () {
    $('#datatable1').dataTable({
        fnDrawCallback: function () {
            if ($(this).find('.dataTables_empty').length == 1) {
                $('th').hide();
                $('#datatable1_info').hide();
                $('#datatable1_paginate').hide();
                $('.dataTables_empty').css({ "border-top": "1px solid #111" });

            } else {
                $('th').show();
                $('#datatable1_info').show();
                $('#datatable1_paginate').show();
            }
        }, "oLanguage": { "sZeroRecords": "<p style='margin:0px !important'><a href='#' class='btn btn-success'>Add new</a></p>" }
    });
});

【讨论】：

如果条件适用 1.) 数据表中的数据表如何在条件 2.) 的情况下删除表头和页脚。）“未找到匹配记录”更改在此表中添加新按钮