function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var sOut = ''; sOut += ''; sOut += ''; sOut += ''; sOut += '
Rendering engine:'+aData[1]+' '+aData[4]+'
Link to source:Could provide a link here
Extra info:And any further details here (img etc)
'; 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 */ $(document).on('click','#hidden-table-info tbody td img',function () { var nTr = $(this).parents('tr')[0]; if ( oTable.fnIsOpen(nTr) ) { /* This row is already open - close it */ this.src = "img/details_open.png"; oTable.fnClose( nTr ); } else { /* Open this row */ this.src = "img/details_close.png"; oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' ); } } ); } );