multiple tables, defining columns, and hidden row

img

Hi,

I'm trying to insert DataTables into 3 separate tables each with the same columns. I am also trying to insert hidden rows. My problem is the following:

* 1st table does not hide the column headers but does hide the correct rows. The hidden row shows the plus/minus image to show/hide and works to display and hide the row. Additionally, the width of column 2 shows correctly.

* 2nd table displays the same as 1st table except it does not recognize the width of column 2 and the hidden row does not display when click on the plus/minus image.

* 3rd table displays all of the columns and rows correctly except that it does not recognize the width in column 2. It also does not display the hidden row when clicking on the plus/minus image.

Here is my code. Any help would be much appreciated:

[code]
$(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";

$('.dataTable thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('.dataTable tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
var oTable;

var oTable = $('.dataTable').dataTable( {
"bPaginate": false,
"bFilter": false,
"iDisplayLength": 50,
"aoColumnDefs": [
/* Show/Hide */ { "bSortable": false, "aTargets": [ 0 ] },
/* ID */ { "bVisible": false, "aTargets": [ 1 ] },
/* Student */ { "sWidth": "150px", "bVisible": true, "aTargets": [ 2 ] },
/* Grade Level */ { "bVisible": false, "aTargets": [ 3 ] },
/* Incident */ { "bVisible": true, "aTargets": [ 4 ] },
/* Reported By */ { "bVisible": true, "aTargets": [ 5 ] },
/* Date/Time */ { "bVisible": true, "aTargets": [ 6 ] },
/* Status */ { "bVisible": true, "aTargets": [ 7 ] }
],
"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
*/
$('.dataTable tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('minus_small') )
{
/* This row is already open - close it */
this.src = "`cImageBase`add_small.gif";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "`cImageBase`minus_small.gif";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );

} ); // end .ready(function()
[/code]

All three of my tables start like so:

img

Does anyone have any idea? This is a great plugin but I really need multiple tables with hidden rows. Thanks