Fix child row opening

vv7v7

Dear Reader,

As you see in this example child rows will open as them should as you click on them, but only in first table. If you'd tried to click open child row in second table you'll open a child row in first table. So an issue: whatever child you would try to open you will open only child rows in first table.

Please could you tell me why ?

Best regards,
vv7v7

vv7v7

Dear Reader,

The possible solution:

var tables = $( '.dataTable' ).dataTable( );
tables.each( function( index, table ) {
  var table_api = $( "#" + table.id ).DataTable( );
  table_api.on( 'click', 'tr td.control', function( td ) {
    var tr = $( td.currentTarget ).closest( 'tr' );
    var row = table_api.row( tr );
    if ( row.child.isShown( ) ) {
      tr.removeClass( 'opened' );
      $( 'div.slider', row.child( ) ).slideUp( function ( ) {
      row.child.hide( );
    });
  } else {
    row.child( format( row.data( ), tr.find( ":hidden" ).length ), 'no-padding child' ).show();
    tr.addClass( 'opened' );
    $( 'div.slider', row.child( ) ).slideDown( );
  }
});

Best regards,
vv7v7