javascript - 自动展开响应式数据表的子行

Question

我有一个响应式数据表 ( Responsive doc. )，格式如下:

var dataTableInfo = j$('[id$="dataTableInfo"]').DataTable({
                 responsive: {
                    "autoWidth": true,
                    details: {
                        type: 'column',
                        target: 0
                    }
                },
                columnDefs: [ {
                    className: 'control',
                    orderable: false,
                    targets:   0
                } ]
            });

我通过搜索外部数据源来填充数据，然后在 DataTable 内有第二个表，其中包含自动来自实例化的附加数据(在子行中)。我可以单击第一列中的图标来展开并显示子行，一切正常。

我想要完成的是，一旦加载了所有数据(我知道这何时发生在回调函数中)，就可以通过此 DataTable 的 Javascript 自动展开子行。

我尝试了以下多种变体:

function ExpandTable(){
        var tab = j$('[id$="dataTableInfo"]').DataTable();
        alert(tab);

        tab.rows().every( function () {

            this.child.show();

        } );
    }

但是我的表根本不会扩展其子行。没有任何反应，控制台中也没有错误消息。

任何人都可以帮我解释一下我如何根据以下内容模拟按钮单击:

$('#example tbody').on( 'click', 'tr', function () {
var child = table.row( this ).child;

if ( child.isShown() ) {
    child.hide();
}
else {
    child.show();
}} );

或以任何其他方式自动扩展子行。

再见!

Answer 1

原因

似乎响应式插件有自己的子行管理，也许这就是为什么 row().child.show() 不起作用。

解决方案

我正在使用未记录的 responsive._detailsDisplay() 方法来触发子行的显示。

// Enumerate all rows
table.rows().every(function(){
    // If row has details collapsed
    if(!this.child.isShown()){
        // Expand row details
        table.settings()[0].responsive._detailsDisplay(this, false);
    }
});

示例

参见this example用于代码和演示。

链接

参见jQuery DataTables: jQuery DataTables: How to expand/collapse all child rows了解更多示例和信息。