Hi guys,
I'm trying to implement a multi-level row group with subtotal and grandtotal and be able to collapse the row group.
I have managed to get the table to collapse, display the subtotal and total. The problem is that when I implement startRender in Row Group, I lose the row group heading. 
Any answers to lead me in the right direction will be greatly appreciated. Code:
$(document).ready(function () {
var collapsedGroups = {};
var table = $('#report-table').DataTable({
order: [[0, 'asc']],
columnDefs: [{
targets: [0, 1, 2 ,3],
visible: false
}],
rowGroup: {
dataSrc: [0, 1, 2, 3],
startRender: function (rows, group, level) {
var usageAvg = rows
.data()
.pluck(6)
.reduce(function (a, b) {
return parseFloat(a) + parseFloat(b);
}, 0);
var percentageAvg = rows
.data()
.pluck(7)
.reduce(function (a, b) {
return parseFloat(a) + parseFloat(b);
}, 0);
var all;
if (level === 0) {
top = group;
all = group;
} else if (level === 1) {
parent = top + group;
all = parent;
// if parent collapsed, nothing to do
if (!collapsedGroups[top]) {
return;
}
} else {
// if parent collapsed, nothing to do
if (!collapsedGroups[parent]) {
return;
}
all = top + parent + group;
}
var collapsed = !collapsedGroups[all];
console.log('collapsed:', collapsed);
rows.nodes().each(function (r) {
r.style.display = collapsed ? 'none' : '';
});
return $('')
.append('' + '' + '' +
'' + '' + '' +
'' + usageAvg + '' +
'' + percentageAvg + '')
.attr('data-name', all).toggleClass('collapsed', collapsed);
}
},
paging: false,
responsive: true,
ordering: false
});
$('#report-table tbody').on('click', 'tr.dtrg-start', function () {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
});
});
VishalJobraj
Posts: 8Questions: 3Answers: 0
Answers
Duplicate fo this thread.
Kevin