如果没有数据，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"
}

Answer 3

我认为您的意思是，如果您的表中没有所有数据，则不显示任何数据表。这不是您可以直接在表初始化中执行的操作。

您需要做的是测试来自“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 4

DataTables 提供了一个在表加载时触发的回调（例如，当服务器端调用完成时）。您可以在其中放置任意代码以随意修改表。

例如，在加载时隐藏您的表格：

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

编辑（添加描述）：基于event doc和setting doc，我们看到DisplayMaster包含表格中的元素数量，并且基于HTML渲染，表格有一个全局div，class= "table class" + _wrapper" 使用默认设置。所以如果我们没有元素，我们会隐藏这个 div。

也许这不是最好的解决方案，但它确实有效。