DataTables child rows
HTML
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<table class="dataTable" id="example">
<thead>
<tr><th>boo</th><th>far</th></tr>
</thead>
<tbody>
</tbody>
</table>
JavaScript
$(document).ready(function() {
dt1 = $('#example').DataTable({
columns: [
{data: 'a'},
{data: 'b'},
],
});
var rowData = {
a: 'Something',
b: 42,
children: [
'<tr><td>one</td><td>1</td></tr>',
'<tr><td>two</td><td>2</td></tr>',
]
};
// make an array of <tr> nodes
var childNodes = [];
for (var c of rowData.children) {
//console.log(c);
childNodes.push($(c));
}
//console.log(childNodes);
// Add the row with all the children
dt1.row.add(rowData)
//.child(rowData.children).show()
//.child(rowData.children[0]).show()
.child(childNodes).show()
//.child(childNodes[0]).show()
.draw(false);
});