jQuery DataTables: Expand only one row at a time.

Raj_Banothe

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) {
// Collapse row details
var tr = $(this).closest('tr');
var row = form_table.row( tr );
if(row.child.isShown()){
// This row is already open - close it
row.child.hide();
}
form_table.rows().every(function() {
if(this.child.isShown()) {
// Collapse row details
this.child.hide();
$(this.node()).removeClass('parent');
}
})
if(row.child.hide()) {
// Open this row
row.child.show();
}
});

Raj_Banothe

Hope it will help someone

allan

Many thanks for sharing that with us!

Regards,
Allan