Nested datatable not working

Mona

Hi,

I am using 3 nested tables in drill down, first table is static in the form and the second is created dynamically thru jquery and the third also same way thru Jquery passing a parameter from the parent.

First drill down is working fine. but when i click on the second drill down, it is not expanding first time and the second time it is expanding but not closed. Second drill down Call is increasing for each expand and not closing the child table. And throwing reinitialize error.

http://jsfiddle.net/dvgotLfz/32/

Please help me to resolve this.

Regards,
Mona

rubenduiveman

Hi;

When you bind on the click event of the td.details-control for #example, you bind on click of ALL td.details-control in #example. When you insert #example1, two td.details-control exist in #example: one as a direct child and one nested in #example1. Therefore, when you click the td.details-control of #example1, the event for #example is also fired, and the .DataTable() is called, which provides you with the error.

There are 2 ways of solving this:

1.Prevent event bubbling on the click of #example1 td.details-control: http://jsfiddle.net/5rqs0p3o/

2.(preferred) Bind events only to the direct td.details-control of the table using ">":
http://jsfiddle.net/ujgo82Lx/

Good luck with your nested tables!