How to Make Invisible Datatable When There Is No Data

How to make invisible datatable when there is no data?

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

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

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.

Is there a setting to stop the display of "No data available in table" in the DataTable?

It works for me.

var someTableDT = $("#some-table").on("draw.dt", function () {
    $(this).find(".dataTables_empty").parents('tbody').empty();
}).DataTable(/*init object*/);

How to hide DataTables export button if no data?

I believe you want to react on filtering and so on. And you just want to make the button invisible, not break the DOM layout. You can use drawCallback and set visibility according to the presence of rows :

drawCallback: function() {
  var hasRows = this.api().rows({ filter: 'applied' }).data().length > 0;
  $('.buttons-excel')[0].style.visibility = hasRows ? 'visible' : 'hidden'
}

Here is a demo -> https://jsfiddle.net/okednaqg/

Hide data table automatically if there is no data to show

Add a rendered attribute to the tag

<h:dataTable rendered="#{not empty fournisseurbean.BC.listematpilotaccess1}">

This will render the component if the expression evaluates to true.

Hide "No data available in table" message when data is present

try this:-

$(document).ready(function () {
 $.ajax({
        url: '@Url.Action("ClaimResultTest", "Claims")',
        data: { seacrhClaimNumber: claimNumberToBeSearched },
        type: 'POST',
        success: function (data) {


                 $("#tblClaimSearch").find('tbody').empty(); //add this line

               var dataClaims = data.Claims;//This has the complete list
               for (i = 0; i < dataClaims.length; i++) {
                alert(dataClaims[i].ClaimNumber);
                $("#tblClaimSearch").find('tbody')
                        .append($('<tr>')
                        .append($('<td><input type="checkbox">'))
                        .append($('<td>').text(dataClaims[i].ClaimNumber))
                        .append($('<td>').text(dataClaims[i].Client))
                        .append($('<td>').text(dataClaims[i].Amount))
                        .append($('<td>').text(dataClaims[i].Deduction))
                        .append($('<td>').text(dataClaims[i].Type))
                        .append($('<td>').text(dataClaims[i].Status))
                            )
                 }
              }
          });
    });

---

Related Topics