How to make invisible datatable when there is no data?

Question

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

I couldn't find any option in the documentation.

Answer 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>

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.

You can take advantage of 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>.

---

Update

[See comments for clarification] Then you need a completely other approach. This works in Chrome and FireFox, cant tell for IE :

Forget about fnInitComplete, use the following code instead :

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

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.

Something like that:

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