1

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??

Improve this question
4
  • What are the IDs of your tables? Make sure the IDs are unique. It looks like you are make the tables dataTables using a class selector. If the IDs aren't unique it will cause problems. Commented May 10, 2013 at 20:01
  • dataTables doesnt require IDs as a selector Commented May 10, 2013 at 20:44
  • 1
    I didn't say that it does require an ID as selector. But if the IDs are not unique, you will run into problems. See my answer here: stackoverflow.com/questions/16463646 Commented May 10, 2013 at 20:50
  • I'm making a call to all tables with dataTable class, so the tables don't have IDs. My problem is the oTables var carries 2 tables and I need to find a way to get the current table selected. Commented May 10, 2013 at 20:55

1 Answer 1

Reset to default
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'));
        } );
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you, I had done some work around that but it looked pretty ugly...it makes a lot of sense moving it out of the Init function :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.