如何在没有数据显示时隐藏数据表？

Question

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

谁能帮帮我？

Answer 1

当没有数据时使用javascript

设置table的CSSvisibility: hidden

Answer 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');
                   }
                }
            }
});

Answer 3

您还需要隐藏包含 table 及其内容的包装 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 示例。

如何在没有数据显示时隐藏数据表？

how to hide datatable when there is no data to display?

html

javascript

datatables

datatables-1.10