jquery DataTable Show hidden child table

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


});

jquery DataTable Show hidden child table