I currently have two tables which take advantage of the onclick details expansion (as seen in this example: http://datatables.net/release-datatables/examples/api/row_details.html) and was wondering if it is possible to create a TableTool Button that would expand all the details in the visible page for the sake of printing/saving/copying. And, if it is possible, could I get a nudge in the right direction? I was looking at the "Plug-in Buttons" example (http://datatables.net/release-datatables/extras/TableTools/plug-in.html) but I'm a bit confused on what to do with it since it would be affecting things within the table itself.
This is what I'm working with:
Also note, the Location column is the one that is actually hidden and reappears. The Details column just holds the optional images.
This is what I'm working with:
/* Formating function for row details */ function fnFormatDetails ( oTable, nTr ){ var aData = oTable.fnGetData( nTr ); var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'; sOut += '<tr><td>This fix is located in: ' +aData[3]+ '</td></tr>'; sOut += '</table>'; return sOut; } $(document).ready(function(){ /* * Insert a 'details' column to the table */ var nCloneTh = document.createElement( 'th' ); var nCloneTd = document.createElement( 'td' ); //nCloneTd.innerHTML = '<img src="jQuery/DataTables-1.9.1/examples/examples_support/details_open.png">'; nCloneTd.className = "center"; $('#prevRev thead tr').each( function () { this.insertBefore( nCloneTh, this.childNodes[0] ); }); $('#prevRev tbody tr').each( function () { this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] ); }); /* * Initialse DataTables, with no sorting on the 'details' column */ var oTable = $('#prevRev').dataTable({ "aLengthMenu":[[5, 10, 25, -1],[5, 10, 25, "All"]], "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] } ], "aaSorting": [[1, 'asc']], "bJQueryUI": true, "sPaginationType": "full_numbers", "sDom": '<"H"Tfr>t<"F"ip>', "oTableTools": { "sSwfPath": "jQuery/DataTables-1.9.1/extras/TableTools/media/swf/copy_csv_xls_pdf.swf", "aButtons": ["csv", "xls", "pdf", "print"] }, "aoColumns": [ /* Details */ { "bVisible": false }, /* WorkItem */ null, /* Comment */ null, /* Location */ { "bVisible": false }, /* Knowledgebase */ null, /* Version */ null ] }); /* 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 */ $('#prevRev tbody tr td').live('click', function () { var nTr = $(this).parents('tr')[0]; if ( oTable.fnIsOpen(nTr) ) { /* This row is already open - close it */ //this.src = "jQuery/DataTables-1.9.1/examples/examples_support/details_open.png"; oTable.fnClose( nTr ); } else { /* Open this row */ //this.src = "jQuery/DataTables-1.9.1/examples/examples_support/details_close.png"; oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' ); } });
Also note, the Location column is the one that is actually hidden and reappears. The Details column just holds the optional images.