Question

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

我在documentation找不到任何选项。

Answer 1

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

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

您可以利用fnInitComplete：

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

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

更新

[见澄清说明]然后你需要一个完全不同的方法。这适用于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);

Answer 2

对于数据表，它会插入一行，告诉您没有要显示的数据，因此您需要检查它。在您填写表格后，直接添加此...

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

Answer 3

我发现这也有效：

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

警告：如果您搜索并且没有结果，则会隐藏整个表格。

Answer 4

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

请注意，因为我的ID为mytable，因此包装名称为mytable_wrapper，因此如果您的表格ID为bla，则为bla_wrapper

Answer 5

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

类似的东西：

table:empty {display: none}

Answer 6

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

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

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

Answer 7

SELECT MIN(OrderDate) AS Min_OrderDate FROM Table_Name

如何在没有数据时创建不可见的数据表？

7 个答案:

更新