Row Expansion Problem

7Redacted

Hello,

I've recently found DataTables and have found it to be a very powerful tool with an easy learning curve. I'm currently trying to implement something like the "DataTables hidden row details" rows example (located at: http://datatables.net/release-datatables/examples/api/row_details.html) -- but when I try to download the code in order to fiddle around with it, I get a working DataTable but none of the rows expand. I think this has something to do with the "extra" data (that is, the data showing in an expanded row) being stored in an array that (I'm assuming) is fetched from a server or something. I've only used datatables to enhance existing tables already in the DOM before so this is just a bit over my head.

What I was wondering, is if there was an example somewhere I would be able to download? Or if there's just a snippet of code I could add to "simulate" having that extra array? Whichever of these examples would be easiest to just get running as a static html file would be absolutely fine, I would just like to see how it works before plugging in my data.

And thanks in advance to anyone who has a sec to help me out with this! I really appreciate it.

It has this code

[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).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );





Rendering engine
Browser
Platform(s)
Engine version
CSS grade




Trident
Internet
Explorer 4.0
Win 95+
4
X


// ... (Lots of Table Rows Later) ...


Other browsers
All others
-
-
U




[/code]

The first response solved my problem -- the live event isn't available for the version of jQuery I was using.

Howitzer

Primary problem:
.live() is removed as of jQuery 1.9. See: http://api.jquery.com/live/

On line 46, try this instead:
[code]$('#example tbody td img').click(function () {[/code]

The other error being thrown is:
[quote]404 Not Found -/css/header.ccss[/quote]

I believe you have an extra "c" in your "ccss" :)

7Redacted

You're a life-saver, I didn't even think about the fact that I was using a different version of jQuery. Thanks so much!

And thanks for getting back to me so quickly! I really appreciate it!

Howitzer

I recommend FireFox with the FireBug addon, or Chrome with its built-in inspection tool.

You would have easily picked up the error^^