如何在没有数据的情况下创建不可见的数据表？

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

当内部没有任何数据(行)时,是否可以隐藏表格?我正在使用查询datatables插件。

I couldn't find any option in the documentation.

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

7 个解决方案

#1

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

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

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

   使用dataTables

   将永远不会为空 - 或者为空 - 因为dataTables强制您拥有 和

2. 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.

   隐藏

   。

   是不够的,你必须隐藏* _wrappper - 包含样式表,分页,过滤器框等的

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, if there is no rows holding data in <tbody>.

如果中没有包含数据的行,这将隐藏dataTable及其所有自动生成的内容。

---

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

#2

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.

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

#3

If you want to hide table, when there is no any child tags in it (i mean when it is ) you can use pseudoclass :empty from css.

如果你想隐藏表,当它没有任何子标签时(我的意思是它)你可以使用伪类:从css中清空。

Something like that:

像这样的东西:

table:empty {display: none}

table:empty {display:none}

#4

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

#5

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

see just because my id is mytable the wrapper is called mytable_wrapper so if your table id isbla it will be bla_wrapper

看看因为我的id是mytable,包装器名为mytable_wrapper,所以如果你的表id为isbla,它将是bla_wrapper

#6

I did with draw event, for every time my datatable changes it checks if has data:

我做了绘制事件,每次我的数据表更改它检查是否有数据:

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

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

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