如果没有数据,jQuery数据表不显示表

Question

我正在使用带有服务器端获取数据的jquery数据表,我的问题是当数据表是空的数据表隐藏表并且没有显示时,我想显示表没有任何关于表消息的数据,如何有这个选项？

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

要根据结果数切换表可见性,只需使用属性fnDrawCallback:

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

Answer 2

你可以这样做

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

只需添加这个

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