没有数据要显示时如何隐藏数据表？ [关闭]答案

【问题标题】：how to hide datatable when there is no data to display? [closed]没有数据要显示时如何隐藏数据表？ [关闭]
【发布时间】：2019-05-13 02:55:34
【问题描述】：

我的界面中有一个数据表。当没有数据时，我想隐藏整个数据表。而不是数据表中的列。

谁能帮帮我？

【问题讨论】：

您可以使用包装数据表的元素的display 属性...
如果能贴出代码就更好了
最好贴出您尝试将数据绑定到表中的代码以及在数据不可用时如何隐藏表的代码，以便进一步进行。

标签： javascript html datatables datatables-1.10

【解决方案1】：

您还需要隐藏包含表格及其内容的包装 div。一个真正简单的解决方案是使用 initComplete，如下所示：

$('#table').dataTable({
   //your table settings here..
   initComplete : function() {
      if ($(this).find('tbody tr').length<=1) {
         $('#table').parents('div.dataTables_wrapper').first().hide();
      }
   } 
});

如果正文中没有包含数据的行，则上述内容将隐藏 dataTable 及其所有自动生成的内容。

以示例添加codepen。

【讨论】：

【解决方案2】：

如果从服务器端获取数据，可以在检查数据为空或未定义时设置$('#yourtable').css('display','none');。

$('#yourtable').DataTable({
            'processing': true,
            'serverSide': true,
            'pagingType': 'simple_numbers',
            'searching': true,
            'autoWidth': false,
            'ajax': {
                'url' : 'your_API_Url',
                'type': 'GET',
                'headers': { 'Authorization':  'Bearer ' + currentUser.access_token },
                'data': function (data) {
                   if(data == null || data == undefined){
                        $('#yourtable').css('display','none');
                   }
                }
            }
});

【讨论】：

这是有效的，但列标题仍然可见
什么列标题仍然可见？可以截图吗？
是的。我在上面的问题中添加了屏幕截图
你可以尝试添加 $('thead').css('display','none');在ajax成功到
你能把html作为标题吗？

【解决方案3】：

在没有数据时使用javascript设置表格的CSSvisibility: hidden

【讨论】：