Add details for particular row Table with JS array how to make it work ?

yodark

Hello

I'm making an array and I'm using javascript table to create the array (not in the DOM)
I'm using the scripts to add details on a column. The thing is it's only working for the data visible on loading. It doens't apply to next pages data how to make the function available for each element and not only visible ones ?

[code]

/* Data set - can contain whatever information you want */

//console.debug(aDataSet);
var aDataSet = $.parseJSON( '[["29","bar","bar","foo","bar","bar"],["30","bar","bar","foo","bar","bar"],["31","bar","bar","foo","bar","bar"],["34","bar","bar","foo","bar","bar"],["35","bar","bar","foo","bar","bar"],["49","bar","bar","foo","bar","bar"],["51","bar","bar","foo","bar","bar"],["53","bar","bar","foo","bar","bar"],["57","bar","bar","foo","bar","bar"],["59","bar","bar","foo","bar","bar"],["61","bar","bar","foo","bar","bar"],["69","bar","bar","foo","bar","bar"],["75","bar","bar","foo","bar","bar"],["130","bar","bar","foo","bar","bar"],["2472","bar","bar","foo","bar","bar"],["2474","bar","bar","foo","bar","bar"],["2476","bar","bar","foo","bar","bar"],["2485","bar","bar","foo","bar","bar"],["2495","bar","bar","foo","bar","bar"],["2502","bar","bar","foo","bar","bar"],["2504","bar","bar","foo","bar","bar"],["2512","bar","bar","foo","bar","bar"],["2514","bar","bar","foo","bar","bar"],["2518","bar","bar","foo","bar","bar"],["2523","bar","bar","foo","bar","bar"],["2528","bar","bar","foo","bar","bar"]]' );
//console.debug(aDataSet);
//aDataSet.replace('"','\x22');
var aDataHeader = $.parseJSON('[{"sTitle":"ID"},{"sTitle":"Nom"},{"sTitle":"pasnull"},{"sTitle":"Work for"},{"sTitle":"Email"},{"sTitle":"Phone number"}]') ;
//console.debug(aDataHeader);


console.debug(myheader);


/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[0]+' '+aData[1]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'InsertNote: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] );
} );


$('#dynamic').html( '' );
var oTable = $('#example').dataTable( {
"aaData": aDataSet,
"aoColumns": aDataHeader,
"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').on('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* 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]

Thank you a lot !