Javascript 自动展开响应数据表的子行

我有一个响应数据表（），格式如下：

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

或者以任何其他方式自动展开子行

再见

原因 响应插件似乎有自己的子行管理，这可能就是为什么

row（）.child.show（）

不起作用的原因

解决方案 我正在使用undocumented

responsive.\u details display（）

方法触发子行的显示

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

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

链接

---

有关更多示例和信息，请参阅。

您还可以将类“parent”添加到DataTable初始化中行回调的行中：

 $('.table-container table').DataTable({
"rowCallback": function (row, data, index) {
  var that = row;

  if(!$(row).attr('role') || $(row).attr('role') != 'row' || $(row).hasClass('parent')){
    return;
  }

  $(row).addClass('parent');
}});

---

这是最佳方法，因为渲染后不必遍历所有行。因此，您不必在O（n^2）中执行，而是可以一下子完成这项任务，即O（n）。

因为DataTables Responsive v2.0.0+（于2015年11月发布）

您可以使用选项

childrowhimmediate

立即显示子项（折叠的数据）

$('#example').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate,
            type: ''
        }
    }
} );

在文档中，他们对此有一个明确的定义

如果还希望切换图标保持使用状态，请将

类型

道具设置为

内联

：

$('#example').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate,
            type: 'inline'
        }
    }
} );

---

属性参考：，

谢谢，我偶然尝试了类似的方法，但我的选择中肯定有一些问题。这很有效。非常感谢您的示例和链接，它确实帮助我解决了我的问题。谢谢，这比公认的解决方案更有效。