<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="ajax-details" order="5">

<css lib="datatables"><![CDATA[
td.details-control {
	background: url('../resources/details_open.png') no-repeat center center;
	cursor: pointer;
}
tr.shown td.details-control {
	background: url('../resources/details_close.png') no-repeat center center;
}
]]></css>
<js lib="jquery datatables" />

<title>Child rows (show extra / detailed information)</title>
<js><![CDATA[

/* 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": [
			{
				"className":      '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');
		}
	} );
} );

]]></js>

<info><![CDATA[

The DataTables API has a number of methods 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 `dt-api row().child` methods to first check if a row is already displayed, and if so hide it (`dt-api row().child.hide()`), otherwise show it (`dt-api row().child.show()`). The content of the child row in this example is defined by the `format()` function, but you would replace that with whatever content you wanted to show, possibly including, for example, [an Ajax call to the server](https://www.datatables.net/blog/2017-03-31) to obtain any extra information.

]]></info>

</dt-example>
