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及其工作原理。

DataTables API具有许多用于将子行附加到DataTable中的父行的方法。这可用于显示有关行的其他信息，在您希望传达有关行的信息多于主机表中可用空间的情况下很有用。

下面的示例利用row（）。child方法首先检查是否已显示行，如果已显示，则将其隐藏（row（）。child.hide（）），否则将其显示（row（） .child.show（））。在此示例中，子行的内容由format（）函数定义，但是您可以将其替换为想要显示的任何内容，例如，可能包括对服务器的Ajax调用以获取任何其他信息。 / p>

Answer 1

创建每行时，您可以使用createdRow选项处理事件，并根据情况从第一个单元格中删除类details-control。

例如：

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

有关代码和演示，请参见this example。

数据表-如何隐藏详细信息控件-如果没有数据可显示

1 个答案: