<table id="parentTable">
<thead>
<tr>
<th></th>
<th>Values</th>
<th>Number</th>
<th>Other</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class=‘expander‘>+</span>
</td>
<td>value 1</td>
<td>111</td>
<td>xyz</td>
</tr>
<tr>
<td><span class=‘expander‘>+</span>
</td>
<td>value 2</td>
<td>222</td>
<td>xyz</td>
</tr>
<tr>
<td><span class=‘expander‘>+</span>
</td>
<td>value 3</td>
<td>333</td>
<td>xyz</td>
</tr>
</tbody>
</table>
js:
$(function () {
var parentTable = $("#parentTable").DataTable({
order: [1, "asc"],
columnDefs: [{
sortable: false,
targets: [0]
}]
});
$(".expander").css({
cursor : "pointer"
}).click(function () {
var row = parentTable.row($(this).closest("tr"));
if(row.child() == undefined){
$(this).html("-");
var $table =
$("<table><thead><tr><th>InnerV1</th><th>InnerV2</th><th>InnerV3</th><th>InnerV4</th></tr></thead><tbody><tr><td>foo</td><td>bar</td><td>biz</td><td>baz</td></tr><tr><td>baz</td><td>biz</td><td>bar</td><td>foo</td></tr><tr><td>bar</td><td>foo</td><td>baz</td><td>biz</td></tr></tbody></table>");
$table.attr("id", "childTable_" + row.index());
var childTable = $table.DataTable({
order: [0, "desc"],
columnDefs: [{
sortable: false,
targets: [1, 2]
}]
});
row.child(childTable.table().Container());
row.child.show();
} else {
$(this).html("+");
row.child(false);
}
});
});
