show/hide details with server side processing

eugene210682

First of all, I'm newbie to DataTables, jQeury and javascript in general, so don't judge too hard. Tried to solve the problem myself, but two days of googling, forum search yield'd no result. The point is:
In the script, handling my table, I have usual function to catch clicking "show/hide details" event
[code]
$('#trainings 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 = "./DataTables/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "./DataTables/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details');
}
} );
[/code]
As new row created it's content processed by function
[code]
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
$.post("details.php", {"training":aData[2]},function(data){
$('.details').html(data);
},"html");
}
[/code]
and filled with data returned by server-side php script querying database and producing output in form
bla-blah-blah (mysql query results)
Everything works just fine, EXCEPT when you open another row's details, content of the previously opened details also affected. My guess, that's all because I stated $('.details') as affected object in my fnFormatDetails instead of exact nTr and exact 'details'.
Any help on resolving this issue is appreciated very much.

jimbob72

As you correctly guess, it's because every expanded row is using the same class reference. You need to create a unique class (or ID) for each expanded row. The easiest way to do this is to append a unique reference from your table data. If you have a column that contains an id or row number then you can add using aData, e.g. if you had a unique id in column 0:
[code]$('.details_'+aData[0]+'').html(data);[/code]
Remember to apply the same to the div class where the content ends up...
[code]var sOut ='';[/code]

eugene210682

Thanks for your reply. But didn't work in my case for some reason. What I did is add aData declaration before I use it in event handler:
[code]
oTable.fnOpen( nTr, fnFormatDetails(aData), "details "+aData[2]);
[/code]
and pass aData as the only argument to fnFormatDetails:
[code]
function fnFormatDetails (aData)
{
$.post("details.php", {"training":aData[2]},function(data){
$('.details '+aData[2]).html(data);
},"html");
}
[/code]
Eventually, it gave me "undefined" in details row. Could that be because of the whitespaces in aData[2] value?

jimbob72

This is my actual working script
[code]
//bit where the expanded data is loaded
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
//container expanding div
var sOut ='';
//ajax loading div
sOut += '';
sOut += '';
return sOut;
}

//main datatables script taken out for purposes of this example

//open/close script
$('#listing tbody tr td img.extra').live( 'click', function () {
var nTr = this.parentNode.parentNode;
var aData = oTable.fnGetData( nTr );
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "[[++site_url]]resources/css/images/details_open.png";
oTable.fnClose( nTr );
//close the expanding row div
$('.er_'+aData[0]).slideUp('slow', 'easeInQuad');
}
else
{
/* Open this row */
this.src = "resources/css/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
//load the ajax data
$('.list_'+aData[0]).load('ajax/content?id[]='+aData[0]);
//open the expanding row div
$('.er_'+aData[0]).slideDown('slow', 'easeOutQuad');
}
} );
[/code]
Note - the row will open smoothly, but not close smoothly as the table row closes before the div can slide shut. I'm working on that bit.

eugene210682

Thanks everyone for your help. The problem was solved. The general concept is creating div by fnFormatDetails that has class ID containing keyvalue (one of the columns without whitespaces in my case)
[code]
function fnFormatDetails (oTable, nTr)
{
var aData = oTable.fnGetData(nTr);
var rowkey = aData[2].replace(' ','');
var sOut = '';
sOut += "";
return sOut;
}
[/code]
and than fill the content of this div with the data returned by php script.
[code]
$('#trainings tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
var aData = oTable.fnGetData(nTr);
var rowkey = aData[2].replace(' ','');
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "./DataTables/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "./DataTables/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), "details");
$.post("details.php", {"training":aData[2]},function(data){
$('.'+rowkey).html(data);
},"html");
}
} );
[/code]
...and that's it

p.s. god bless DataTables :)