function format () {
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>Name...</td>'+
'<tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>123</td>'+
'<tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'<tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#expendable-data-table').DataTable({
"className": 'details-control',
"order": [[0, 'asc']],
"aLengthMenu": [[20, 30, 50, 75, -1], [20, 30, 50, 75, "All"]],
"pageLength": 20,
"dom": '<"row align-items-center justify-content-between top-information"lf>rt<"row align-items-center justify-content-between bottom-information"ip><"clear">'
});
$('#expendable-data-table 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( format(row.data()) ).show();
tr.addClass('shown');
}
});
});
<script src="assets/plugins/data-tables/jquery.datatables.min.js"></script>
<script src="assets/plugins/data-tables/datatables.bootstrap4.min.js"></script>
<table id="expendable-data-table" class="table display nowrap" style="width:100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td class="details-control"></td>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</th>
<td>2011/04/25</td>
<td>$320,800</td>
<th>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
</tbody>
</table>