JQuery Datatables：如何添加子行？

Question

Datatables是否用css標記定義子行？我有一個包含子行的HTML表。我想將它們設置爲Datatables中的子行，以便在排序時保留父行。我無法找到將行標記爲子行的css類的引用。

所有我能找到的是JQuery row.child（）函數，您可以在該行添加子行，但我對JQuery不太好，並且無法弄清楚如何在此處添加行。

請看這JSFiddle。 （點擊「程序」進行排序，列表圖標展開/摺疊子行）。

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

}); 

Answer 1

我決定插入我自己的類的父行和使用row.add（）函數與一些JQuery的手動添加子行。

$('.parentrow').closest('tr').each(function(){ 
     var row = table.row(this); 
     childrows = $(this).closest('tr').nextUntil('.parentrow'); 
     row.child(childrows).show(); 
    });