<table id="example" class="table display table-striped table-bordered table-hover table-sm" cellspacing="0" width="100%"> <thead> <tr> <th></th> <th>Action</th> <th>Message</th> <th>id</th> <th>Tank</th> <th>Status</th> <th>Start</th> <th>End</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Action</th> <th>Message</th> <th>id</th> <th>Tank</th> <th>Status</th> </tr> </tfoot> </table> <script type="text/javascript"> /* Formatting function for row details - modify as you need */ function format ( d ) { // `d` is the original data object for the row return '<table id="example" class="table table-bordered table-sm" cellspacing="0" width="100%" style="background-color:#3F51B5;color:white;">'+ '<tr>'+ '<td>Product:</td>'+ '<td>'+d.Product+'</td>'+ '</tr>'+ '<tr>'+ '<td>Supplier Id:</td>'+ '<td>'+d.SupplierId+'</td>'+ '</tr>'+ '<tr>'+ '<td>Supplier Name:</td>'+ '<td>'+d.SupplierName+'</td>'+ '</tr>'+ '<tr>'+ '<td>Delivery Car Number:</td>'+ '<td>'+d.DeliveryCarNumber+'</td>'+ '</tr>'+ '<tr>'+ '<td>OrderPrice:</td>'+ '<td>'+d.OrderPrice+'</td>'+ '</tr>'+ '<tr>'+ '<td>OrderVolume:</td>'+ '<td>'+d.OrderVolume+'</td>'+ '</tr>'+ '<tr>'+ '<td>DeliverVolume:</td>'+ '<td>'+d.DeliverVolume+'</td>'+ '</tr>'+ '<tr>'+ '<td>FuelPoints:</td>'+ '<td>'+d.FuelPoints+'</td>'+ '</tr>'+ '<tr>'+ '<td>TankGroup:</td>'+ '<td>'+d.TankGroup+'</td>'+ '</tr>'+ '<tr>'+ '<td>Tank id</td>'+ '<td>Start Volume</td>'+ '<td>End Volume</td>'+ '<td>Input Volume</td>'+ '</tr>'+ '<tr>'+ '<td>Fp id</td>'+ '<td>Start Volume</td>'+ '<td>End Volume</td>'+ '<td>Output Volume</td>'+ '</tr>'+ '</table>'; } // '<table>'+ // '<tr>'+ // '<th>Tank Id</th>'+ // '<th>Start Volume</th>'+ // '<th>End Volume</th>'+ // '<th>Input Volume</th>'+ // '<tr>'+ // '</table>' $(document).ready(function() { var table = $('#example').DataTable( { "ajax": "api/v1/Deliveries/deliveryDetails.txt", "columns": [ { "className": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "data": "Action" }, { "data": "Message" }, { "data": "Id" }, { "data": "Tank" }, { "data": "Status" }, { "data": "Start" }, { "data": "End" }, ], "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() ) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { // Open this row row.child( format(row.data()) ).show(); tr.addClass('shown'); } } ); } ); </script>