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

时间:2015-06-18 15:34:50

标签: javascript jquery datatables datatables-1.10

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

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

侨!

3 个答案:

答案 0 :(得分:6)

原因

响应式插件似乎有自己的子行管理,也许这就是为什么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以获取代码和演示。

LINKS

有关更多示例和信息,请参阅jQuery DataTables: jQuery DataTables: How to expand/collapse all child rows

答案 1 :(得分:3)

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

 $('.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)。

答案 2 :(得分:0)

自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'
        }
    }
} );

属性参考:typedisplay