JQuery DataTables: Show/hide row details with multiple tables

Question

I'm aware there's a similar question on here JQuery DataTables: How to show/hide row details with multiple tables? but that doesn't apply to my current problem completely.

I have the code:

var oTable = $('.dataTable').dataTable( {
    "aoColumnDefs": [
     { "bSortable": false, "aTargets": [ 0,3,4 ] },
     { "bVisible": false, "aTargets": [ 4 ] }
    ],  
    "aoColumns": [
      null,
      null,
      null,
      null,
      { "sType": "html" }
    ],    
    "aaSorting": [[1, 'asc']],
    "bFilter": false,
    "bPaginate": false,
    "fnInitComplete": function(oSettings) {
      /* 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 (oTable.fnIsOpen(nTr)) {
           // This row is already open - close it
           this.src = "css/images/details_open.png";
           oTable.fnClose(nTr);
         } else {
           // Open this row
           this.src = "css/images/details_close.png";
           oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
         }  
        } );        
      }
});

That works if there's only one if I add the dataTable class to a second table, then they work as datatables but the show/hide buttons fail in both tables. Both tables have the same count of fields and content, just for the sake of making it work, but still no success.

On the similar post, the person suggests adding:

tbl = $(this).parent().parent().dataTable();

to the click function but I have tried that and it didn't work.

What am I missing??

Answer 1

In short: get rid of the fnInitComplete, and move the "live" call to below the dataTable call.

As an example, if you have three tables, after each table is completed, your current code will execute the fnInitComplete method - so fnInitComplete gets called 3 times. Your fnInitComplete uses a selector to "live" the click event to an img, and the selector will "live" to all tables. This results in multiple bindings. See this jsfiddle, http://jsfiddle.net/KeVwJ/, which duplicates your method. (Note that I'm not using images so only capturing click on the td cell, not an image).

var oTable = $('.dataTable').dataTable( {
    "bFilter": false,
    "bPaginate": false,
    "fnInitComplete": function(oSettings) {
        $('.dataTable tbody td').live('click', function () {
             var nTr = this.parentNode;
            alert(nTr);
        } );        
      }
});

If you click on any row in the table, you will get 3 alert boxes, because 3 tables are created and they each "live" click for all tables at fnInitComplete.

To fix, remove the fnInitComplete, and put the code for "live" after the call to dataTable. That should solve it. See this jsfiddle: http://jsfiddle.net/rgMNu/ Click on any row in the table and it will identify the correct table class. Again since I am capturing the click on td, I only have to do this.parentNode.parentNode.parentNode. I think you'll have to do another level.

$('.dataTable tbody td').live('click', function () 
        {
            var t = this.parentNode.parentNode.parentNode;
            alert(jQuery(t).attr('class'));
        } );