javascript 没有数据时如何制作不可见的数据表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19296736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make invisible datatable when there is no data?
提问by Okan Kocyigit
Is it possible to hide a table when it doesn't have any data(rows) inside? I'm using the query datatables plugin.
当表格里面没有任何数据（行）时，是否可以隐藏表格？我正在使用查询数据表插件。
I couldn't find any option in the documentation.
我在文档中找不到任何选项。
回答by davidkonrad
Despite good suggestions I think there still needs (another) answer.
尽管有很好的建议，但我认为仍然需要（另一个）答案。
Using dataTables a
<table>will never be empty - or:empty- since dataTables enforces you to have a<thead>and a<tbody>It is not enough to hide the
<table>, you must hide the*_wrappperalso - the<div>that contains the styled table, pagination, filter-box and so on.
使用 dataTables a
<table>永远不会为空 - 或者:empty- 因为 dataTables 强制您拥有 a<thead>和 a<tbody>这是不够隐藏
<table>，你必须隐藏*_wrappper也-在<div>包含风格的表，分页，过滤箱等。
You can take advantage of fnInitComplete:
您可以利用fnInitComplete：
$('#table').dataTable({
//initialization params as usual
fnInitComplete : function() {
if ($(this).find('tbody tr').length<=1) {
$(this).parent().hide();
}
}
});
This will hide the dataTable and all its autogenerated content, ifthere is no rows holding data in <tbody>.
这将隐藏数据表和它的所有自动生成的内容，如果没有举办数据行<tbody>。
Update
更新
[See comments for clarification] Then you need a completely other approach. This works in Chrome and FireFox, cant tell for IE :
[请参阅评论以进行澄清] 那么您需要一种完全不同的方法。这适用于 Chrome 和 FireFox，不能告诉 IE：
Forget about fnInitComplete, use the following code instead :
算了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);
回答by Hussein Nazzal
if($('#mytable tbody .dataTables_empty').length){
$('#mytable_wrapper').hide()
}
see just because my id is mytablethe wrapper is called mytable_wrapperso if your table id isblait will be bla_wrapper
看到只是因为我的 id 是mytable包装器被调用mytable_wrapper所以如果你的表 id 是bla它bla_wrapper
回答by Benjamin Mastrangelo
I found that this works as well:
我发现这也有效：
$('#table').dataTable({
fnDrawCallback : function() {
if ($(this).find('.dataTables_empty').length == 1) {
$(this).parent().hide();
}
}
});
Warning: If you search and no results it will hide the entire table.
警告：如果您搜索但没有结果，它将隐藏整个表格。
回答by Reinstate Monica Cellio
With datatables, it will insert a row telling you that there is no data to display, so you need to check for that. Directly after your call to populate the table, add this...
使用数据表，它会插入一行，告诉您没有要显示的数据，因此您需要进行检查。在您调用填充表格后，直接添加此...
if ($(".dataTables_empty").length) {
$(".dataTables_wrapper").hide();
}
回答by you-rick
If you want to hide table, when there is no any child tags in it (i mean when it is ) you can use pseudoclass :emptyfrom css.
如果你想隐藏表格，当它没有任何子标签时（我的意思是当它是）你可以使用:empty来自 css 的伪类。
Something like that:
类似的东西：
table:empty {display: none}
table:empty {display: none}
回答by Tiago ávila
I did with draw event, for every time my datatable changes it checks if has data:
我使用了 draw 事件，每次我的数据表更改时，它都会检查是否有数据：
var table = $('#example').DataTable();
table.on('draw', function () {
if (table.data().any()) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
});
回答by Bhavesh Suthar
$(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>" }
});
});
