This example shows the use of DataTables' ability to show and hide child rows which are attached to a parent row in the host table. This is often used to show additional information about a row, particularly when you wish to convey more information about a row than there is space for in the host table.
The example below shows server-side processing being used with the first column having an event
listener attached to it which will toggle the child row's display. This is set up using columns.dataDT
and columns.defaultContentDT
, in combination
with CSS to show an empty cell with a background image which can be clicked upon.
The event handler makes use of the row().childDT
methods to firstly check if a
row is already displayed, and if so hide it, if not show it. 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. Note that the format details function has access to the full data
source object for the row, including information that is not actually shown in the table (the salary
parameter for example).
Furthermore, this example shows a small difference from the client-side row details example in that to have rows automatically reopen
when the table is redrawn, we need to track a unique identifier for each row - in this case the row
id
. This is required because in server-side processing mode rows are automatically
destroyed and recreated on each draw.
First name | Last name | Position | Office | |
---|---|---|---|---|
First name | Last name | Position | Office |
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 55 56 57 58 59 | function format ( d ) { return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+ 'Salary: '+d.salary+'<br>'+ 'The child row can contain any data you wish, including links, images, inner tables etc.'; } $(document).ready(function() { var dt = $('#example').DataTable( { "processing": true, "serverSide": true, "ajax": "scripts/ids-objects.php", "columns": [ { "class": "details-control", "orderable": false, "data": null, "defaultContent": "" }, { "data": "first_name" }, { "data": "last_name" }, { "data": "position" }, { "data": "office" } ], "order": [[1, 'asc']] } ); // Array to track the ids of the details displayed rows var detailRows = []; $('#example tbody').on( 'click', 'tr td:first-child', function () { var tr = $(this).closest('tr'); var row = dt.row( tr ); var idx = $.inArray( tr.attr('id'), detailRows ); if ( row.child.isShown() ) { tr.removeClass( 'details' ); row.child.hide(); // Remove from the 'open' array detailRows.splice( idx, 1 ); } else { tr.addClass( 'details' ); row.child( format( row.data() ) ).show(); // Add to the 'open' array if ( idx === -1 ) { detailRows.push( tr.attr('id') ); } } } ); // On each draw, loop over the `detailRows` array and show any child rows dt.on( 'draw', function () { $.each( detailRows, function ( i, id ) { $('#'+id+' td:first-child').trigger( 'click' ); } ); } ); } ); |
In addition to the above code, the following Javascript library files are loaded for use in this example: