row details not working?

vivendi

I saw the example on how to hide/show row details:
http://pierro.web.cern.ch/pierro/lib/dataTables-1.7/examples/api/row_details_update.html

It looks very good so i decided to implement that in my table aswell. But i get some strange results when i try to use it. The header of the tables is shifted to the right, leaving a blank column on the left. And the body data of my table is shifted to the left, leaving a black column on the right. See my screenshot, i marked it with red arrows.

http://i53.tinypic.com/2wnmk2u.png

Any idea what the problem might be?? This is how my HTML and JS looks like:

[code]



Regio
Periode
Type
voor
Datum gemaakt







Regio
Periode
Type
voor
Datum gemaakt



[/code]

[code]
//called when document ready
function loadTable ( )
{
oTable = null;
oTable = $('#example').dataTable( {
"oLanguage": {
"sZeroRecords": "Geen resultaten gevonden",
"sInfo": "_START_ / _END_ advertenties van de _TOTAL_ advertenties",
"sSearch": "Filter op termen: ",
"sInfoEmpty": "0 van de 0 [0 records]",
"sInfoFiltered": "(gefilterd van _MAX_ totaal aantal records)",
},
"bJQueryUI": true,
"iDisplayLength": 25,
"bFilter":true,
"bRetrieve":true,
"bPaginate": false,
"bProcessing": true,
"sAjaxSource": 'index.php?action=JSONdata
} );
oTable.fnSort([ [4,'desc'] ]);

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] );
} );

$('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 = "http://pierro.web.cern.ch/pierro/lib/dataTables-1.7/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "http://pierro.web.cern.ch/pierro/lib/dataTables-1.7/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
}
[/code]

vivendi

Found it, i actually had to place the following code before creating the dataTable class:
[code]
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] );
} );

[/code]