Open 2 row details tables at same time

Open 2 row details tables at same time

AkkatipsAkkatips Posts: 5Questions: 0Answers: 0

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?

Replies

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • AkkatipsAkkatips Posts: 5Questions: 0Answers: 0

    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/

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    edited May 2022

    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

  • AkkatipsAkkatips Posts: 5Questions: 0Answers: 0

    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');
            }
        } );
    });
    
  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • AkkatipsAkkatips Posts: 5Questions: 0Answers: 0

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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • AkkatipsAkkatips Posts: 5Questions: 0Answers: 0

    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();
        });
    });
    
Sign In or Register to comment.