jQuery DataTables: Expand only one row at a time.

jQuery DataTables: Expand only one row at a time.

Raj_BanotheRaj_Banothe Posts: 3Questions: 0Answers: 0

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();
}
});

Replies

  • Raj_BanotheRaj_Banothe Posts: 3Questions: 0Answers: 0

    Hope it will help someone

  • allanallan Posts: 56,851Questions: 1Answers: 9,035 Site admin

    Many thanks for sharing that with us!

    Regards,
    Allan

Sign In or Register to comment.