I use this script to extend/expand rowGroups in Datatables.
var collapsedGroups = {}; //1
rowGroup: {
// Uses the 'row group' plugin
dataSrc: 'data',
startRender: function(rows, group) {
var collapsed = !!collapsedGroups[group]; //2
//LOOP THREW EAH ROW
rows.nodes().each(function (r) {
//SET DISPLAY = NONE
r.style.display = 'none';
//IF COLLAPSED (OPEN)
if (collapsed) {
//SET DISPLAY = SHOW
r.style.display = '';
}
});
// Add category name to the <tr>. NOTE: Hardcoded colspan
return $('<tr/>')
.append('<td></td>')
.attr('data-name', group)
.toggleClass('collapsed', collapsed);
}
},
//ON CLICK BTN EXPAND
$(document).on('click', 'i.fa-angle-down', function() {
//GET TR DATA NAME
var name = $(this).parent('td').parent('tr').data('name');
//
collapsedGroups[name] = !collapsedGroups[name]; //3
//
table.draw(false);
});
With this code, i’m able to have several groups open at the same time.
Now i’m trying to only let one group to be open at a time.
I’ve tried to change the obj collapsedGroups to a var:
var collapsedGroup; //1
var collapsed = collapsedGroup; //2
collapsedGroup = name; //3
But this did not work.
How can i change the code to only allow one open group at a time?
2
Answers
You need to collect
data-nameof<tr>on finish draw event then on click<tr>changecollapsedGroupsof other name to false like:I added the code with pure js (because i prefere it) but you can change it with jquery if you want.
To change the Datatables rowGroup to only allow one open group at a time, you need to keep track of the currently open group and close the other when a different group opens. I hope the code I will share below will solve your problem.