Extra row details not opening...
Extra row details not opening...
I have the icon showing up, but the listener doesn't seem to be working....
Here is the code
[code]
//$(document).ready(function() {
//$('#my_events').dataTable( {
//"sPaginationType": "full_numbers"
// } )
//} );
var oTable;
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;
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";
$('#my_events thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#my_events tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
oTable = $('#my_events').dataTable( {
"aoColumns": [
{ "bSortable": false },
null, null, null, null, null
],
"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
*/
$('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 = "../images/add.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
} );
Event
Date
Event: Test Event - Eddie
Date: Saturday, November 28, 2009
Your result for this event:
Place: 1
Time: 00:06:46
Average Pace: 00:05:27 / mi
Event: Another test event
Date: Wednesday, December 09, 2009
No results have been posted for this event.
Event: Another test event
Date: Wednesday, December 09, 2009
No results have been posted for this event.
Event: Another test event
Date: Wednesday, December 09, 2009
No results have been posted for this event.
Event: Another test event
Date: Wednesday, December 09, 2009
No results have been posted for this event.
[/code]
Here is the code
[code]
//$(document).ready(function() {
//$('#my_events').dataTable( {
//"sPaginationType": "full_numbers"
// } )
//} );
var oTable;
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;
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";
$('#my_events thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#my_events tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
oTable = $('#my_events').dataTable( {
"aoColumns": [
{ "bSortable": false },
null, null, null, null, null
],
"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
*/
$('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 = "../images/add.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
} );
Event
Date
Event: Test Event - Eddie
Date: Saturday, November 28, 2009
Your result for this event:
Place: 1
Time: 00:06:46
Average Pace: 00:05:27 / mi
Event: Another test event
Date: Wednesday, December 09, 2009
No results have been posted for this event.
Event: Another test event
Date: Wednesday, December 09, 2009
No results have been posted for this event.
Event: Another test event
Date: Wednesday, December 09, 2009
No results have been posted for this event.
Event: Another test event
Date: Wednesday, December 09, 2009
No results have been posted for this event.
[/code]
This discussion has been closed.
Replies
Could you post a link to an example for us to view? Cant quite see what is happening here.
My initial thoughts are that because you dynamically add a colun at the begining of the table the dataTables is falling over because you dont have the same number of solumns in aoColumns as you have actual columns. Would it not be better to have the details column in your markup then just set the visibility to false if you want to hide it?
Regards,
Izzy
The example ( http://datatables.net/examples/api/row_details.html ) appears to be working correctly. So I'd guess it's a customisation that is tripping your code up. Perhaps you could be more specific about what isn't working.
Regards,
Allan