javascript - 没有数据时如何制作不可见的数据表？

Question

是否可以在没有任何数据(行)的情况下隐藏表格？我正在使用查询数据表插件。

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

Answer 1

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

1. 使用数据表 <table>永远不会为空 - 或 :empty - 因为数据表强制你有一个 <thead>和一个 <tbody>

2. 隐藏 <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);