Datatables Child Rows

HTML

<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<table id="example" class="display" cellspacing="0" width="100%">
	<thead>
		<tr>
			<th></th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Salary</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td class="details-control"></td>
			<td>Airi Satou</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>$162,700</td>
		</tr>

		<tr>
			<td class="details-control"></td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>$320,800</td>
		</tr>

		<tr>
			<td class="details-control"></td>
			<td>Garrett Winters</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>$170,750</td>
		</tr>

		<tr>
			<td class="details-control">
			  test
			</td>
			<td>Ashton Cox</td>
			<td>Junior Technical Author</td>
			<td>San Francisco</td>
			<td>$86,000</td>
		</tr>
	</tbody>

	<tfoot>
		<tr>
			<th></th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Salary</th>
		</tr>
	</tfoot>
</table>

CSS

td.details-control {
	background: url("https://datatables.net/examples/resources/details_open.png") no-repeat center center;
	cursor: pointer;
}

tr.shown td.details-control {
	background: url("https://datatables.net/examples/resources/details_close.png") no-repeat center center;
}

JavaScript

$(document).ready(function() {
	var table = $("#example").DataTable({
		"order": [[1, "asc"]]
	});

	// Add event listener for opening and closing details
	$("#example tbody").on("click", "td.details-control", function() {
		var tr = $(this).closest("tr");
		var row = table.row(tr);

		if (row.child.isShown()) {
			row.child.hide();
			tr.removeClass("shown");
		}
		else {
			row.child("<div></div>").show();
			tr.addClass("shown");
		}
	});
});