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

1
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:

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

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.

0
Sathiraumesh On

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

1
Hien Nguyen On

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

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