Datatables-如果没有要显示的数据，如何隐藏详细信息控件

Question

如果不存在要显示的数据，我想禁用详细信息控制。

function format(d) {   
    return d[1];
}

var table = $('#table').DataTable({
    "searching": false,
    "ordering": false,
    "info": false,
    dom: 'frt',
    serverSide: true,
    "pageLength": 4,
    language: {
        "zeroRecords": "..."
    },
    "stripeClasses": [],
    "columns": [
        null,
        null,
        null,
        null,
        {
            "class": "details-control",
            "orderable": false,
            "data": null,
            "defaultContent": ""
        },
        null
    ],
    ajax: $.fn.dataTable.pageLoadMore({
        url: "@Url.Action("Load")"
        }),
    drawCallback: function () {
            $('#btn-Load').toggle(this.api().page.hasMore());
        }
});

// Add event listener for opening and closing details
$('#table tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row(tr);

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child(format(row.data())).show();
        tr.addClass('shown');
    }
});

HTML:

<table id="table" class="display" cellspacing="0">
    <thead>
        <tr>
            <th>@Html.LocalResources("A")</th>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

如果位置1上没有数据显示，我如何隐藏显示图标？我咨询这个网站：https://datatables.net/examples/api/row_details.html查看api和它是如何工作的。

数据表API有许多方法用于将子行附加到数据表中的父行。这可用于显示有关行的其他信息，对于希望传递有关行的信息超过主机表空间的情况很有用。

下面的示例使用了row（）。子方法，首先检查行是否已显示，如果已显示，则隐藏它（row（）。小孩隐藏（）），否则显示它（行（）。小孩show（））。在本例中，子行的内容由format（）函数定义，但您可以将其替换为您想要显示的任何内容，例如，可能包括对服务器的Ajax调用以获取任何额外信息。

Answer 1

您可以使用createdRow选项在创建每一行时处理事件，并根据您的条件从第一个单元格中删除classdetails控件。

例如：

"createdRow": function( row, data, dataIndex ) {
   if ( data["position"] === "Software Engineer" ) {
      $("td.details-control", row).removeClass("details-control");
   }
}

有关代码和演示，请参阅此示例。