<script>
/* Function for child row details*/
function getChildRow(data) {
// `data` is the data object for the row
return '<table cellpadding="5" cellspacing="0"'
+ ' style="padding-left:50px;">' +
'<tr>' +
'<td>Full name:</td>' +
'</tr>' +
'<tr>' +
'<td>Address in detail:</td>' +
'<td>' + data.address + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extra details like ID:</td>' +
'<td>' + data.employee_id + '</td>' +
'</tr>' +
'</table>';
}
$(document).ready(function () {
/* Initialization of datatables */
var table = $('#tableID').DataTable({
"ajax": "nestedData.txt",
"columns": [{
"className": 'details-control',
"orderable": true,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "designation" },
{ "data": "city" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
});
// Click events for expanding and
// closing using up/down arrows
$('#tableID tbody').on('click',
'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// Closing the already opened row
row.child.hide();
// Removing class to hide
tr.removeClass('shown');
}
else {
// Show the child row for detail
// information
row.child(getChildRow(row.data())).show();
// To show details,add the below class
tr.addClass('shown');
}
});
});
</script>
--