function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '
';
sOut += 'Rendering engine: | '+aData[1]+' '+aData[4]+' |
';
sOut += 'Link to source: | Could provide a link here |
';
sOut += 'Extra info: | And any further details here (images etc) |
';
sOut += '
';
return sOut;
}
$(document).ready(function() {
$('#dynamic-table').dataTable( {
"aaSorting": [[ 4, "desc" ]]
} );
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '
';
nCloneTd.className = "center";
$('#hidden-table-info thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#hidden-table-info tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#hidden-table-info').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']]
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#hidden-table-info tbody td img').click(function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "../../../assets/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../../../assets/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );