there is a datatable in my interface. when there is no data I want to hide the entire datatable. not the columns in the datatable.

can anyone help me ?

enter image description here

3 Answers

JasonA On Best Solutions

You also need to hide the wrapping div that contains the table and its content. A real simple solution would be to use initComplete like below:

   //your table settings here..
   initComplete : function() {
      if ($(this).find('tbody tr').length<=1) {

The above will hide the dataTable and all of its autogenerated content, if there are no rows holding data in its body.

Added codepen with example.

Sathiraumesh On

set the table's CSS visibility: hidden when there is no data using javascript

Hien Nguyen On

If you get data from serverside, you can set $('#yourtable').css('display','none'); when checking data is null or undefined.

            '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){