JQuery Datatables:如何添加子行? [英] JQuery Datatables: How to add child row?
问题描述
Datatables是否使用css标记定义子行?我有一个包含子行的HTML表。我想将它们设置为Datatables中的子行,以便在排序时与父行保持一致。我找不到一个css类的引用,它将行标记为子行。
Does Datatables define the child row with a css marker? I have an HTML table that includes child rows. I would like to set these as child rows in Datatables so they stay with the parent row when sorted. I could not find a reference to a css class that marks a row as a child row.
我可以找到的是JQuery row.child()函数,您可以在行中添加子行,但我对JQuery不太了解,无法弄清楚在这里添加行。
All I could find was the JQuery row.child() function where you add child rows to the row but I am not good with JQuery and can't figure out how to add the row here.
请参阅此 JSFiddle (单击程序排序,列表图标展开/折叠子行)。
Please see this JSFiddle. (Click "Program" to sort and the list icon to expand/collapse the child rows).
<table id="tprogram" class="table table-striped table-hover ">
<thead>
<tr>
<th class='icon_colunm no-sort'></th>
<th>Program</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-right"> <i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed1"></i>
</td>
<td class='name'>A</td>
</tr>
<tr class="collapse collapsed1">
<td class="text-right"> <i class="fa fa-minus"></i></td>
<td class='name'>a</td></tr>
<tr>
<td class="text-right"> <i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed2"></i>
</td>
<td class='name'>B</td></tr>
<tr class="collapse collapsed2">
<td class="text-right"> <i class="fa fa-minus"></i>
</td>
<td class='name'>a</td></tr>
<tr class="collapse collapsed2">
<td class="text-right"> <i class="fa fa-minus"></i>
</td>
<td class='name'>b</td></tr>
<tr class="collapse collapsed2">
<td class="text-right"> <i class="fa fa-minus"></i>
</td>
<td class='name'>c</td>
</tr>
</tbody>
$(document).ready(function() {
$('#tprogram').dataTable({
"bPaginate": true,
"bSort": true,
"bInfo": false,
"bFilter": true,
"bAutoWidth": false,
"LengthChange": false,
"iDisplayLength": 50,
});
$('#tprogram').on('click', '.fa-list-ul', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(*?*).show();
tr.addClass('shown');
}
});
});
推荐答案
我决定将自己的类插入父行并使用row.add()函数用一些JQuery手动添加子行。
I decided to insert my own class to the parent row and use the row.add() function to add the child rows manually with some JQuery.
$('.parentrow').closest('tr').each(function(){
var row = table.row(this);
childrows = $(this).closest('tr').nextUntil('.parentrow');
row.child(childrows).show();
});
这篇关于JQuery Datatables:如何添加子行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!