javascript - Open one Row Details at a time Datatable? - Stack Overflow

So,

There is this example .html

How can only one row details is open at a time and if I click other the previous opened row details closes ?

Any suggestions ?

So here is my new code the row details that I am showing have two other format (case1,case2)

var tr = $(this).closest('tr');
var row = dt.row(tr);
var idx = $.inArray(tr.attr('id'), detailRows);

if (row.child.isShown()) {
    tr.removeClass('details');
    row.child.hide();

    // Remove from the 'open' array
    detailRows.splice(idx, 1);
} 
else {

    // Add to the 'open' array
    if (idx === -1) {
        detailRows.push(tr.attr('id'));
    }

    if (dt.cell('.details', 1).data() == "SIRE" || dt.cell('.details', 1).data() == "CDI" || dt.cell('.details', 1).data() == "Terminal" || dt.cell('.details', 1).data() == "Other") {
        row.child(case1(row.data())).show();
    }
    else {
        row.child(case2(row.data())).show();
    }
}

So,

There is this example https://datatables/examples/server_side/row_details.html

How can only one row details is open at a time and if I click other the previous opened row details closes ?

Any suggestions ?

So here is my new code the row details that I am showing have two other format (case1,case2)

var tr = $(this).closest('tr');
var row = dt.row(tr);
var idx = $.inArray(tr.attr('id'), detailRows);

if (row.child.isShown()) {
    tr.removeClass('details');
    row.child.hide();

    // Remove from the 'open' array
    detailRows.splice(idx, 1);
} 
else {

    // Add to the 'open' array
    if (idx === -1) {
        detailRows.push(tr.attr('id'));
    }

    if (dt.cell('.details', 1).data() == "SIRE" || dt.cell('.details', 1).data() == "CDI" || dt.cell('.details', 1).data() == "Terminal" || dt.cell('.details', 1).data() == "Other") {
        row.child(case1(row.data())).show();
    }
    else {
        row.child(case2(row.data())).show();
    }
}

• javascript
• jquery
• datatable

Share Improve this question Follow edited Mar 16, 2016 at 6:58 Deepankar asked Mar 15, 2016 at 12:08 DeepankarDeepankar 13811 silver badge1414 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

I thank everyone for their valuable time and effort. Though I figured out how to get the thing working.

Though I was still not able to get the minus icon to show plus icon on row collapse. So I decided to remove the minus icon itself and added selected class to show that the row is selected.

Here is the code :-

$('#example tbody').on('click', 'tr td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = dt.row(tr);
    var idx = $.inArray(tr.attr('id'), detailRows);
    if (row.child.isShown()) {
        //tr.removeClass('details');
        row.child.hide();
        // Remove from the 'open' array
        detailRows.splice(idx, 1);
    } else {
        dt.rows().eq(0).each(function(idx) {
            var trx = $(this).parent('tr');
            var row = dt.row(idx);

            if (row.child.isShown()) {
                console.log(trx);
                row.child.hide();
                tr.removeClass('details');
                console.log('enters');
            }
        });

        tr.addClass('details');

        if (dt.cell('.details', 1).data() == "SIRE" || dt.cell('.details', 1).data() == "CDI" || dt.cell('.details', 1).data() == "Terminal" || dt.cell('.details', 1).data() == "Other") {
            console.log(dt.cell('.details', 1).data());
            row.child(case1(row.data())).show();
        } else {
            console.log(dt.cell('.details', 1).data());
            row.child(case2(row.data())).show();
        }
        // Add to the 'open' array
        if (idx === -1) {
            detailRows.push(tr.attr('id'));
        }

    }
}

Adding the following code to else made sure all the open row details to close on other open click

dt.rows().eq(0).each(function(idx) {
    var trx = $(this).parent('tr');
    var row = dt.row(idx);

    if (row.child.isShown()) {
        console.log(trx);
        row.child.hide();
        tr.removeClass('details');
        console.log('enters');
    }
});

If anyone still finds the solution to my issue where I am able to close the open row details but not able to add plus icon please do suggest.

Thanks

I e to the same situation today and here is a working sample code for any one if he will in a same situation

$('#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
    {
     //Below line does the trick :)
     if ( table.row( '.shown' ).length ) {
              $('.details-control', table.row( '.shown' ).node()).click();
      }
      row.child( format(row.data()) ).show();
      tr.addClass('shown');
 }
})

Try to change line 42-50 on something like this:

    else {
        $('#example tbody tr').each(
            function() {
               var row = dt.row( tr );
               if (row.child.isShown()) {
                    row.child.hide();
                    $(this).removeClass('details');
               }
            }
        ); // each
        detailRows=[];
        tr.addClass( 'details' );
        row.child( format( row.data() ) ).show();

        // Add to the 'open' array
        if ( idx === -1 ) {
            detailRows.push( tr.attr('id') );
        }
    }

when click on $('.details-control') jquery add class "details" on tr (this.parent()) you can create script remove all "details" class from all ('tbody tr') and add it only to this.parent()

you can use this code

  $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
             $('tbody tr').removeClass("details");
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

Here a working example of only one opened row at a time with slide up and down of the child row contents.

$('.slideTableRow td').on('click', function () {
    if (row.child.isShown()) {
        //slide up the opened row
        $('div.slider', row.child()).slideUp('fast', function () {
            row.child.hide();
            tr.removeClass('shown');
        });
    } else {
        //finds all open rows and simulates a click
        table.find('tr.shown').each(function () {
            $(this).find('td').first().click();
        });

        //add the contents you want in the child row div
        row.child('<div class="slider">' + content + '</div>', 'no-padding').show();
        tr.addClass('shown');

        //slide open the container
        $('div.slider', row.child()).slideDown('fast');
    }
});

The snippet will slide down the row and closes all other rows with slide up so that only one row at a time is openend in the Datatable table.

You will need the following css

table.dataTable tbody td.no-padding {
    padding: 0;
}

table.dataTable div.slider {
    display: none;
}

Please try this. Its working fine, no need to write much code and re-assign plus minus icon. Add script of responsive js and css and try this

var clicks = 0;
$('#example').on('click', 'tr td.dtr-control', function(e) {
  e.preventDefault();
  if (clicks == 3) {
    clicks = 1;
  }
  clicks += 1;
  if (clicks <= 2) {
    $('#example').find('.parent td.dtr-control').not(this).trigger('click');
    //OR
    // table.rows('.parent').nodes().to$().find('td:first-child').not(this).trigger('click');
  }
});

This is one of the best solutions for expanding only one row at a time. This solution works fine from the first page to the last page, i.e., in all the pagination. There is no need to include an external button.

var form_table = $('#forms').DataTable({
                paging: true,
                responsive:true
});


$('#forms').on('click', 'tr td.dtr-control', function (event) {
   var tr = $(this).closest('tr');
   var row = form_table.row( tr );
   if(row.child.isShown()){
        row.child.hide();
    }
    form_table.rows().every(function() {
         if(this.child.isShown()) {
        this.child.hide();
        $(this.node()).removeClass('parent');
     }
    })
    if(row.child.hide()) {
        row.child.show();
    }
});