我有一个响应式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();
}} );
或以任何其他方式自动扩展子行。
侨!
答案 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以获取代码和演示。
有关更多示例和信息,请参阅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');
}});
这是最佳方法,因为您不必在渲染后遍历所有行。因此,不是在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'
}
}
} );