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

Question

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

我在文档中找不到任何选项。

Answer 1

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

1. 使用 dataTables a<table>永远不会为空 - 或:empty- 因为 dataTables 强制您拥有 a<thead>和 a<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);

Answer 2

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

看到只是因为我的 id 是mytable被调用的包装器mytable_wrapper所以如果你的表 id 是bla它将会是bla_wrapper

Answer 3

我发现这也有效：

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

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

Answer 4

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

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

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

Answer 5

使用数据表，它会插入一行告诉你没有数据要显示，所以你需要检查一下。在您调用填充表格后，立即添加此...

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

Answer 6

如果要隐藏表格，当其中没有任何子标签时（我的意思是当它是时），您可以使用:emptycss 中的伪类。

像这样的东西：

table:empty {display: none}

Answer 7

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