javascript - jQuery 数据表中的responsive.details.renderer() 函数的回调是什么？

Question

数据表初始化:

$('#tblEmployee').DataTable({
        "bDestroy": true,
        responsive: true,
        "order": [[0, "desc"]],
        "bFilter": false,
        "bInfo": false,
        "bLengthChange": false,
        "lengthMenu": [[5]],
        "bAutoWidth": false,
        "oLanguage": {
            "sEmptyTable": "No records found !",
        },
        "processing": true
});

在数据表的响应式 View 中，当用户单击“加号”符号时，它会在表内呈现具有“.child”类的子行。 在这里，我需要调用一个 JavaScript 函数来禁用数据表的控件。 仅当数据表折叠时我才需要禁用控件。

function disableCtrlInsideDT(){     
      $('.dataTable.collapsed').find('input:checkbox, input:button, select, button').attr('disabled', true);
}

我也编写了一个外部CSS，但它没有按预期工作。我的意思是，CSS 禁用了该控件，但“不允许”光标此时不起作用。

.dataTable.dtr-inline.collapsed tbody tr { cursor: pointer !important; pointer-events: none !important; }

所以，我需要一个回调，我可以在其中编写所有 javascript 方法，这些方法应该在渲染子行后触发。

Answer 1

您可以处理responsive-display显示、更新或隐藏行的详细信息时发生的事件。

例如:

var table = $('#example').DataTable( {
    responsive: true
} );

table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
    console.log( 'Details for row '+row.index()+' '+(showHide ? 'shown' : 'hidden') );
} );

但是，不清楚为什么您要禁用 (+) 控件上的点击，我将由您决定。