Multiple Tables with Nested Tables on same table

paulwilson

Hi There,

I don't seem to be able to find the answer to this:

I have a quite dynamically generated tables on my page, these tables all have nested sub tables for expanded details. To keep the javascript down I have used the following:

[code]
oTable = $('.Bookings').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
[/code]

Which works fine, all the tables with that class-name turns into a lovely datatable.

Now the problem I am having is, the first table works find with it's nested sub-table -- the data comes in nicely, when you expand it it's all there, animates well etc. No problem. However, none of the subsequent tables work. When you click on the expand icon, the image changes, but no sub-table.

Here is the code I am using

[code]
$('.Bookings tbody td img').click(function () {
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')) {
/* 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";
var companyid = $(this).attr("rel");
var contractid = $(this).attr("class");
$.get("/bookings/GetBookingSubData?id=" + companyid + "&contractid=" + contractid, function (employees) {
oTable.fnOpen(nTr, employees, 'expand');
});
}
});

[/code]

The problem is with the line:
[code]

oTable.fnOpen(nTr, employees, 'expand');

[/code]

Because everything else works, it pulls all the data into "employees", when I look at the data is fulled with a nicely formatted table etc. The parent table just wont expand.

Let me re-iterate; the first table in a dynamic about of tables works fine with the sub table. The rest don't; the only way around this, that I have found s it dynamically create javascript for each table, but that does feel like a lot of extra code.

Any help would be greatly appreciated.

paulwilson

I just realised, I put the title in incorrectly, it should be Multiple Tables with Nested Subtables on the same Page.

allan

I'm going to guess that you need 'live' events, but without an example to see the use case exactly it is a little hard to say.

Try changing:

> $('.Bookings tbody td img').click(function

to:

[code]
$(document).on( 'click', '.Bookings tbody td img', function
[/code]

Failing that, a link would be very useful.

Allan