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

【问题标题】：Expand Child Rows of Responsive Datatables automatically自动展开响应数据表的子行
【发布时间】：2015-06-18 15:34:49
【问题描述】：

我有一个响应式数据表 (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();
}} );

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

Ciao！

【问题讨论】：

标签： javascript jquery datatables datatables-1.10

【解决方案1】：

原因

似乎Responsive插件自己做子行管理，也许这就是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。

【讨论】：

谢谢，我确实尝试了类似的方法，但我的选择器一定有问题。这行得通。
非常感谢您的示例和链接，它确实帮助我解决了我的问题。

【解决方案2】：

您也可以在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');
}});

jsfiddle

这是最佳方法，因为您不必在渲染后遍历所有行。因此，您无需在 O(n^2) 中执行，您就可以一举完成，即 O(n)。

【讨论】：

谢谢，这比公认的解决方案好得多。

【解决方案3】：

自 DataTables Responsive v2.0.0+（2015 年 11 月发布）起

您可以使用选项childRowImmediate 立即显示孩子（折叠的数据）。

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

在文档中，他们为此提供了 dedicated example。

如果您还希望切换图标继续使用，请将 type 属性设置为 inline：

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

属性参考：type、display

【讨论】：