Server-side row details

fiuz

Hi,
im trying to do a show/hide row details with a json response following the examples but i did something wrong. I searched in forum and google the problem, but cant find a solution.
After debug code with conection to database and lot more stuf, i did a simply example to see if i was wrong in something, but seems its all ok in my php because the example works in the same way. I dont know i this is the way to do what i want, need some help plz.

here is the first example: http://davidbosque.com/test/g1.php its basically a copy from the examples.

in the showed row after click on "+" i want to get some data from another php, that comes as a json. but when i apply the ajaxsource its comes automatically, seems logical, but i basically did what i saw in examples. here the result: http://davidbosque.com/test/g2.php

you can see how first load the table with example data, and after a second loads the json from the ajax source.

the g1.php file code is:

[code]








var oTable;
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[2]+' '+aData[5]+'';
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() {
oTable = $('#grid').dataTable( {
"bProcessing": true,
//"bServerSide": true,
//"sAjaxSource": "fg.php",
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
],
"aaSorting": [[1, 'asc']]
} );

$('#grid 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 = "img/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "img/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );





col 1
col 2
col 3
col 4
col 5
col 6






example-col2-row1
example-col3-row1
example-col4-row1
example-col5-row1
example-col6-row1



example-col2-row2
example-col3-row2
example-col4-row2
example-col5-row2
example-col6-row2



example-col2-row3
example-col3-row3
example-col4-row3
example-col5-row3
example-col6-row3



example-col2-row4
example-col3-row4
example-col4-row4
example-col5-row4
example-col6-row4








[/code]

the code of the second example its the same but there is no comment in //"bServerSide": true, and //"sAjaxSource": "fg.php",

All works nice, but i want to get the json data returned when i click on the image, and i want it inside the details, like this:

When this data is shown:
[code]
Rendering engine: example-col3-row1 example-col6-row1
Link to source: Could provide a link here
Extra info: And any further details here (images etc)
[/code]

There i want the json data returned .

Hope u understand me, my english its not good.

Thanks :)