javascript 自动扩展响应数据表的子行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30919799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expand Child Rows of Responsive Datatables automatically
提问by erikduvet
I have a responsive dataTable (Responsive doc.) in the following format:
我有以下格式的响应式数据表（响应式文档）：
var dataTableInfo = j$('[id$="dataTableInfo"]').DataTable({
responsive: {
"autoWidth": true,
details: {
type: 'column',
target: 0
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ]
});
I fill this with data through a search to an external data source and I then have a second table inside the DataTable with additional data (in a child Row) that comes automatically from my instaniation. I can click on the icon in the first column to expand and show the child row, everything works fine.
我通过搜索外部数据源用数据填充它，然后我在 DataTable 中有第二个表，其中包含来自我的实例化的其他数据（在子行中）。我可以单击第一列中的图标展开并显示子行，一切正常。
What I want to accomplish is to automatically expand the child rows through Javascript of this DataTable, once all the data has been loaded (I know when this occurs in a callback function).
我想要完成的是通过这个DataTable的Javascript自动扩展子行，一旦所有数据都被加载（我知道这在回调函数中何时发生）。
I have tried multiple variation of the following:
我尝试了以下多种变体：
function ExpandTable(){
var tab = j$('[id$="dataTableInfo"]').DataTable();
alert(tab);
tab.rows().every( function () {
this.child.show();
} );
}
But my table simply won't expand its child rows. Nothing happens and no error messages in the console.
但是我的表根本不会扩展其子行。没有任何反应，控制台中也没有错误消息。
Can anyone help me in explaining how I for example can simulate a button click according to this:
任何人都可以帮助我解释我如何根据以下内容模拟按钮点击：
$('#example tbody').on( 'click', 'tr', function () {
var child = table.row( this ).child;
if ( child.isShown() ) {
child.hide();
}
else {
child.show();
}} );
or in any other way automating this expanding of the child rows.
或以任何其他方式自动扩展子行。
Ciao!
再见！
回答by Gyrocode.com
CAUSE
原因
It seems that Responsive plug-in does its own child row management, maybe that's why row().child.show()does not work.
好像Responsive插件有自己的子行管理，也许这就是row().child.show()行不通的原因。
SOLUTION
解决方案
I am using undocumented responsive._detailsDisplay()method to trigger showing of a child row.
我正在使用未记录的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);
}
});
EXAMPLE
例子
See this examplefor code and demonstration.
有关代码和演示，请参阅此示例。
LINKS
链接
See jQuery DataTables: jQuery DataTables: How to expand/collapse all child rowsfor more examples and information.
有关更多示例和信息，请参阅jQuery DataTables：jQuery DataTables：如何展开/折叠所有子行。
回答by Dustin
You can also add the class "parent" to rows on the row callback in the DataTable initialization:
您还可以在 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');
}});
This is the optimal method as you don't have to iterate through all rows post render. So instead of performing in O(n^2) you will be able to accomplish this in one fell swoop, i.e., O(n).
这是最佳方法，因为您不必在渲染后遍历所有行。因此，不是在 O(n^2) 中执行，您将能够一举完成此操作，即 O(n)。
回答by Mohannad Najjar
Since DataTables Responsive v2.0.0+ (released on Nov 2015)
自 DataTables Responsive v2.0.0+（2015 年 11 月发布）
you can use the option childRowImmediateto show the child (collapsed data) immediately.
您可以使用该选项childRowImmediate立即显示子项（折叠数据）。
$('#example').DataTable( {
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.childRowImmediate,
type: ''
}
}
} );
in the docs they have a dedicated examplefor this.
在文档中，他们有一个专门的例子。
If you also want the toggle icon to remain use, set the typeprop to inline:
如果您还希望继续使用切换图标，请将type道具设置为inline：
$('#example').DataTable( {
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.childRowImmediate,
type: 'inline'
}
}
} );
