如何在没有数据时创建不可见的数据表？ [英] How to make invisible datatable when there is no data?

问题描述

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

Is it possible to hide a table when it doesn't have any data(rows) inside? I'm using the query datatables plugin.

我在文档。

推荐答案

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

Despite good suggestions I think there still needs (another) answer.

1. 使用dataTables < table> 永远不会空 - 或：空 - 因为dataTables强制您拥有< thead> 和< tbody>

1. Using dataTables a <table> will never be empty - or :empty - since dataTables enforces you to have a <thead> and a <tbody>

隐藏< table> ，你必须隐藏 * _ wrappper - 包含样式表的< div> ，分页，过滤盒等。

It is not enough to hide the <table>, you must hide the *_wrappper also - the <div> that contains the styled table, pagination, filter-box and so on.

您可以利用 fnInitComplete ：

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

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

This will hide the dataTable and all its autogenerated content, if there is no rows holding data in <tbody>.

[请参阅注释以澄清]然后你需要一个完全不同的方法。这适用于Chrome和FireFox，无法告诉IE：

[See comments for clarification] Then you need a completely other approach. This works in Chrome and FireFox, cant tell for IE :

忘记 fnInitComplete ，请改用以下代码：

Forget about fnInitComplete, use the following code instead :

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);

这篇关于如何在没有数据时创建不可见的数据表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！