The DataTables API has a number of methods available for attaching child rows to a parent row in the DataTable. This can be used to show additional information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.
The example below makes use of the row().childDT
methods to firstly check if a
row is already displayed, and if so hide it (row().child.hide()DT
), otherwise show it (row().child.show()DT
). The content of the child row is,
in this example, defined by the formatDetails()
function, but you would replace that with
whatever you wanted to show the content required, possibly including, for example, an Ajax call to the
server to obtain the extra information to show.
The Javascript shown below is used to initialise the table shown in this example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | /* Formatting function for row details - modify as you need */ function format ( d ) { // `d` is the original data object for the row return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ '<tr>'+ '<td>Full name:</td>'+ '<td>'+d.name+'</td>'+ '</tr>'+ '<tr>'+ '<td>Extension number:</td>'+ '<td>'+d.extn+'</td>'+ '</tr>'+ '<tr>'+ '<td>Extra info:</td>'+ '<td>And any further details here (images etc)...</td>'+ '</tr>'+ '</table>'; } $(document).ready(function() { var table = $('#example').DataTable( { "ajax": "../ajax/data/objects.txt", "columns": [ { "class": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "salary" } ], "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'); } } ); } ); |
In addition to the above code, the following Javascript library files are loaded for use in this example: