Keep only one child row opened at a time

Keep only one child row opened at a time

ced2718ced2718 Posts: 2Questions: 1Answers: 0
edited April 2016 in Free community support

Good evening to all,

I'm starting a website which features a datable and I've a question for you. I'm an absolute beginner, I've never built any website before and my knowledges in Ajax are limited so far, so it makes it difficult for now to manage what I want. I hope the answer I'm looking for is not completely stupid but it probably is ;)

I want to build a table with child rows (I've already managed to do this part, thanks to the examples on this website). What I would like now is a kind of trigger that only allows one child row open at the same time.
What I mean is that if one child row is open and if I click on another one, I want the first one to close and the second one to open.

I've found this snippet on the internet (I don't really understand how it works, but it seems that it allows only one child to be open, but you have to close manually the one open if you want to open another one, which is not really what I'm looking for).

 table.rows().eq(0).each( function ( idx ) {
       var row = table.row( idx );
 
       if ( row.child.isShown() ) {
            row.child.close();
       }
 } ); 

The code I've got until now is the following :

$('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.remove();
            tr.removeClass('shown');
        }
        else {

            table.rows().eq(0).each( function ( idx ) {
            var row = table.row( idx );
 
            if ( row.child.isShown() ) {
                 row.child.close();
            }
            } );

            row.child( format(row.data()) ).show();
            tr.addClass('shown');
       }
} );

Thanks for your help!

This question has an accepted answers - jump to answer

Answers

  • UPEngineerUPEngineer Posts: 93Questions: 0Answers: 1
    edited April 2016 Answer ✓

    This is what I used and seems to work correctly.

    $('#example tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );
    
        if ( row.child.isShown() ) {
             row.child.hide();
             tr.removeClass('shown');      
            }
        else 
            {
             if ( table.row( '.shown' ).length ) {
                      $('.details-control', table.row( '.shown' ).node()).click();
              }
              row.child( format(row.data()) ).show();
              tr.addClass('shown');
         }
    })
    
    

    Scott

  • ced2718ced2718 Posts: 2Questions: 1Answers: 0

    It's working perfectly fine! Thank you so much, I had been looking for a while.

This discussion has been closed.