Show/Hide Details in the Form of a Div or Table

springdail

Hello everyone, this is my first post so please forgive me if I leave any details out - I am still getting familiar with this incredibly powerful plug-in!

Now to my question: I am developing in MVC/Jquery environment and am trying to take advantage of the "DataTables hidden row details" feature (http://datatables.net/examples/api/row_details.html) on the client-side at the moment. The code that I have so far is almost identical to the code from the linked example above:

[code]
/* Formating function for row details */
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() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').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
*/
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
[/code]

What I would like to do however is instead of using:
[code]
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;
[/code]
I want to pass a pre-populated view from the view. In other words, I want to pass the information to be displayed when a user presses "+" sign to be taken somewhere from the view for each record in the table. Is this possible? I guess to be even more specific, instead of the code snippet I showed above I want sOut statement to input something like this:
[code]
var aData = oTable.fnGetData( nTr);
var sOut = '';
return sOut;
[/code]
where table (class="details-table") is already pre-generated in the view and will populate for each row in the table.

Thank you in advance and I will appreciate any feedback before I give up on the idea of reusing the same js code for each view!