Open 2 row details tables at same time

Akkatips

I have 2 tables side by side with row details. Is it possible to ensure that if row 1 is clicked on table 1 then row 1 on table 2 is dropped down as well?

kthorngren

In the click event you have for opening the child row (assuming you mean row details like this example and not Responsive) you can use row().child().show() to open the row on the other table. You will need to get the row to pass into row(). Not sue how you are mapping table 1 to table 2 - sorting, searching, etc could put the table in a different state so it might not map row 1 to row 1.

Kevin

kthorngren

I had time to build a simple example:
http://live.datatables.net/xidawimu/1/edit

It uses row().index() to get the index of the clicked row. For this case the data for both tables is the same so the row().index() will match even if the second table is sorted differently. Depending on your situation you may need to use something else to locate the corresponding row in the second table.

Kevin

Akkatips

Hi Kevin,

Thanks for this, really appreciate you taking the time to help with this. I seem to be messing up my existing tables when using this code.

Here's a link to the page that I intend on changing if that is useful/

kthorngren

I see some commented out Datatables code in your index but not sure where to find the running Datatables code and click events for the child rows. Please let us know where to find this code. If the code is in one of the .min.js files we will need to see it unminimized.

Kevin

Akkatips

Cheers Kevin,

The issue that may be causing this is that I am using the WPDatatables plugin which may be causing the issue. The current code I'm attempting to use is:

jQuery(document).ready(function($) {
    // Add event listener for opening and closing details
    $('#table_2 tbody').on('click', 'td.dt-control', function () {
        var tr = $(this).closest('tr');
        var row = wpDataTables.table_2.row( tr );
      
      // Get table 2
      var row2Index = row.index();
      var row2 = wpDataTables.table_3.row( row2Index );
      var tr2 = jQuery( row.node() );

      
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');

            // Close table 2
            row2.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format1(row.data()) ).show();
            tr2.addClass('shown');
          
            // Oepn table 2
            row2.child( format2(row2.data()) ).show();
            tr2.addClass('shown');
          
        }
    } );

     
    // Add event listener for opening and closing details
    $('#table_3 tbody').on('click', 'td.dt-control', function () {
        var tr = $(this).closest('tr');
        var row = wpDataTables.table_3.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format2(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
});

kthorngren

We will need to see the problem to help debug. Can you tell us where to find the above code in your test case? It will need to be unminimized so we can read the Javascript.

Kevin

Akkatips

Hey Kevin, really appreciate the help. You should be able to see the code on this page here/

kthorngren

I placed a breakpoint in the index file for the table 1 click event:

When the page loads the breakpoint for console.log(1) works but when clicking on the child row expand column the breakpoint in the click event nor the console.log(2) fire. However the child row opens. This suggests this code is not the correct code to debug. In order to debug we will need access to the code that is showing the child rows. Please tell us exactly where to find the code you want debugged.

Kevin

Akkatips

Hey Kevin,

Took me a long time to play around but found a bit of a dirty hack around to solve this

jQuery(window).load(function() {

    jQuery(".column-awayteam").unbind("click").on('click', function() {
        var row = jQuery(this).closest('tr');
        var rowIndex = row.index();
        var rowIndex2 = rowIndex + 1;
        jQuery('#table_1 tr').eq(rowIndex2).click();
    });
    
    jQuery(".column-hometeam").unbind("click").on('click', function() {
        var row = jQuery(this).closest('tr');
        var rowIndex = row.index();
        var rowIndex2 = rowIndex + 1;
        jQuery('#table_2 tr').eq(rowIndex2).click();
    });
});