jQuery datatables не отображает таблицу, если у меня нет данных

Question

Я использую данные jquery datatables с данными выборки на стороне сервера, моя проблема в том, что таблица данных пуста, datatables скрывает таблицу и не показывает, что я хочу показать таблица без каких-либо данных в сообщении таблицы, как это сделать?

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

Вы можете сделать это, как

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

Просто добавьте этот

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

Answer 2

Я думаю, что вы имеете в виду, если ваша таблица пуста всех данных не показывают DataTable. Это не то, что вы можете сделать в своей таблице init напрямую.

Что вам нужно сделать, это проверить выход, исходящее от «sAjaxSource»: «server_processing.php» и посмотреть, если он пуст:

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

Затем в CSS можете просто сделать:

.hidden { 
    display: none; 
} 

Answer 3

DataTables обеспечивает обратный вызов, который запускается при загрузке таблицы (например, когда завершается вызов на стороне сервера). Вы можете поместить в него произвольный код, чтобы изменить таблицу, как вам нравится.

Например, чтобы скрыть таблицу под нагрузкой:

var myTable = $("#my_table"); 
myTable.dataTable({ 

    "fnInitComplete": function(oSettings, json) { 
     myTable.hide(); 
    } 
}); 

Answer 4

Для переключения видимости таблицы в зависимости от количества результата, просто используйте свойство fnDrawCallback:

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

Answer 5

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

Редактировать (добавить описание): на основе event doc и setting doc мы видим, что DisplayMaster содержит количество элементов в таблице и на основе рендеринга HTML, таблица имеет global div с классом = "table class" + _wrapper "с настройками по умолчанию. поэтому, если у нас нет элементов, мы спрячем этот div.

Возможно, это не лучшее решение, но это работа.