Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82115

[SOLVED] How to add button to expand all details

$
0
0
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:
/* 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.

Viewing all articles
Browse latest Browse all 82115

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>