JQuery datatables don't display table if don't have data

Question

I use jquery datatables data with server side fetch data, my problem is that the data table is empty data tables that hide the table and do not show that I want to show the table without any data in the table message, is this an option?

oTable_topics =$('#showTopics').dataTable({ "bLengthChange": false, "bStateSave": true, "iDisplayLength": 12, "bScrollCollapse": true, "bJQueryUI": true, "bAutoWidth": false, "sAjaxSource": "server_processing.php", "sPaginationType": "full_numbers", "bProcessing": true, // "fnCreatedRow": function( nRow, aData, iDataIndex ) { // $('td:eq(5)', nRow).html("<ul class='styledlist' style='width:80px !important;'><img src='http://localhost/shirazee/UI/images/icons/publish.png' style='border:none;'/></ul>"); // }, "fnDrawCallback": function(oSettings) { clickRowHandler_topics(); if ( oSettings.aiDisplay.length == 0 ) { return; } var nTrs = $('tbody tr', oSettings.nTable); var iColspan = nTrs[0].getElementsByTagName('td').length; var sLastGroup = ""; for ( var i=0 ; i<nTrs.length ; i++ ) { var iDisplayIndex = oSettings._iDisplayStart + i; var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0]; if ( sGroup != sLastGroup ) { var nGroup = document.createElement( 'tr' ); var nCell = document.createElement( 'td' ); nCell.colSpan = iColspan; nCell.className = "group"; nCell.innerHTML = sGroup; nGroup.appendChild( nCell ); nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] ); sLastGroup = sGroup; } } }, "aoColumnDefs": [ { "bVisible": false, "aTargets": [ 0 ] } ], "aaSortingFixed": [[ 0, 'asc' ]], "aaSorting": [[ 1, 'asc' ]], "fnServerParams": function ( aoData ) { aoData.push( {"name": "id" , "value": "i.id" }, {"name": "subject" , "value": "i.subject" }, {"name": "date_time", "value": "i.date_time"} , {"name": "posted_by", "value": "u.username"} , {"name": "ctitle" , "value": "c.title"} , {"name": "etitle" , "value": "e.title"}, {"name": "istatus" , "value": "i.status"}, {"name": "join" , "value": "JOIN categories c ON i.category = c.id JOIN status_topics e ON i.status = e.id JOIN users u ON i.posted_by = c.id"}, {"name": "action" , "value": "topics" } )} }); function clickRowHandler_topics() { $('#showTopics tbody tr').bind('click', function () { var aData = oTable_topics.fnGetData( this ); iId_topics = aData[1]; }); } 

Answer 1

To switch the table visibility depending on the number of results, simply use the fnDrawCallback property:

 var _grid = $("#myTable").dataTable({ fnDrawCallback: function (settings) { $("#myTable").parent().toggle(settings.fnRecordsDisplay() > 0); } }); 

Answer 2

You can do it like

 $('#showTopics').dataTable( { "oLanguage": { "sEmptyTable" : "Your custom message for empty table" } } ); 

Just add this

 "oLanguage": { "sEmptyTable" : "Your custom message for empty table" } 

Answer 3

I think what you mean, if your table is empty, then all the data is not displayed. This is not something you can do directly in your init table.

What you need to do is check the output coming from your "sAjaxSource": "server_processing.php" and see if it is empty:

 $.getJSON( "server_processing.php", function( data ) { if( this = "" || NULL ) { // add css hidden classes to all datatables elements $("#showTopics").addClass("hidden"); $(".your-th-and-thead-classes").addClass("hidden"); } } 

Then in your CSS you can simply do:

 .hidden { display: none; } 

Answer 4

DataTables provides a callback that starts when the table loads (for example, when the call ends on the server side). You can place arbitrary code to modify the table as you like.

For example, to hide the table at startup:

 var myTable = $("#my_table"); myTable.dataTable({ "fnInitComplete": function(oSettings, json) { myTable.hide(); } }); 

Answer 5

 var myTable = $("#my_table"); myTable.dataTable({ "fnInitComplete": function(oSettings) { if (oSettings.aiDisplayMaster.length <= 0) { $("#my_table_wrapper").hide(); } } }); 

Edit (add description): based on event doc and doc , we see that DisplayMaster contains the number of elements in the table and based on HTML rendering, the table has a global div with class = "table class" + _wrapper "with default settings, therefore, There are no elements, we hide this div.

This may not be the best solution, but it works.