show/hide details of AJAX constructed table

Roberte

Hello,

And thank you for your great work.

I am trying to show/hide details of a row when the table is constructed from an AJAX source (using "sAjaxSource": '../examples_support/json_source.txt')

I have tried to make it work with these two examples:

http://datatables.net/examples/api/row_details.html
If I add "sAjaxSource": '../examples_support/json_source.txt, clicking on the show/hide icons doesn't work.

http://datatables.net/examples/server_side/row_details.html
If I replace "sAjaxSource": "../examples_support/server_processing_details_col.php" by "sAjaxSource": '../examples_support/json_source.txt and remove "bServerSide": true, the table doesn't come up.

Would you be able to help me with this issue?

Many thanks!

allan

I suspect you are having problems with the event listeners not being attached. Please see the FAQ entitled "My events don't work on the second page" ( http://datatables.net/faqs ) which contains relevant information.

Allan

Roberte

Allan,

Thank you for your reply.
I've had a look at the FAQ entitled "My events don't work on the second page" ( http://datatables.net/faqs ).
I have also used Visual Event, and I can see that the events are not being applied to the open/close icons.

Here is the code I am using:

[code]
var oTable;

/* Formating function for row details */
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;
}

/* Event handler function */
function fnOpenClose ( oSettings )
{
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).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";
/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
}

$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "../examples_support/json_source3.txt",
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
],
"aaSorting": [[1, 'asc']],
"fnDrawCallback": fnOpenClose
} );
} );
[/code]

This code is taken from your exemple at http://www.datatables.net/examples/server_side/row_details.html

I have removed the line: "bServerSide": true,

I have replaced: "sAjaxSource": "../examples_support/server_processing_details_col.php",
by: "sAjaxSource": "../examples_support/json_source3.txt",

Where ../examples_support/json_source3.txt is a valid json file looking like this:

[code]
{ "aaData": [ ["","Trident","Internet Explorer 4.0","Win 95+","4","X"],["","Trident","Internet Explorer 5.0","Win 95+","5","C"]] }
[code]

In this case the table shows: No matching records found

Is the information I've provided enough for you to help me?

Thanks for your support!

allan

Try changing fnDrawCallback to fnInitComplete, and then use Visual Event to see if the events are correctly applied.

The example code could probably be simplified here:

$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {

to

$('td img', oTable.fnGetNodes() ).click( function () {

Allan

Roberte

It worked, thank you so much!

Mithrus

I'd recommend adding a class to your image also, in case you plan on having any other images displayed. For example:[code]$('td img.expand', oTable.fnGetNodes() ).click( function () {[/code]

Roberte

Thanks Mithrus!