Javascript 没有数据时如何使数据表不可见？

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

我无法在列表中找到任何选项

---

只因为我的id是

mytable

包装器被称为

mytable\u包装器

，所以如果你的表id是

bla

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

：empty

诸如此类：

---

table:empty{display:none}

对于datatables，它将插入一行，告诉您没有要显示的数据，因此您需要进行检查。在调用填充表之后，直接添加以下内容

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

---

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

使用dataTables a

将永远不会为空-或

：空

-因为dataTables强制您拥有

和

仅隐藏

是不够的，还必须隐藏

*\u包装器

——包含样式表、分页、筛选框等的

您可以利用

finitcomplete

：

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

---

我发现这同样有效：

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

---

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

我使用了draw事件，每次我的datatable更改时，它都会检查是否有数据：

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

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

$（文档）.ready（函数（）{
$（'#datatable1'）。dataTable({
fnDrawCallback:函数（）{
if（$（this）.find（'.dataTables_empty'）。长度==1）{
$（'th'）.hide（）；
$（'#datatable1_info'）.hide（）；
$（'#datatable1_paginate'）.hide（）；
$（'.dataTables_empty'）.css（{“border top”：“1px solid#111”}）；
}否则{
$（'th'）.show（）；
$（'#datatable1_info'）。show（）；
$（'#datatable1_paginate'）.show（）；
}
}，“oLanguage”：{“sZeroRecords”：“
”
});
});

这是一个更好的答案，但仍然存在一个问题。我动态地添加或删除tr，那么是否可以让它在每次数据操作中都工作？当我删除必须隐藏的表的最后一行或添加第一行时，必须显示表。@Ocal，您是否在使用fnAddData/fnDeleteRow？数据表（如果条件适用1。）如何在条件2下删除表头和表尾。）“未找到匹配记录”更改“添加新”按钮此表效果良好。您可能希望在清除搜索字段时添加

}else{$（this）.parent（）.show（）；}

，以将表带回来。

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

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

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