Multi Level Row Group with Subtotals and Totals
Multi Level Row Group with Subtotals and Totals
VishalJobraj
Posts: 8Questions: 3Answers: 0
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. This is currently what it looks like:
This is more like how I need it to look:
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 $('<tr/>')
.append('<td>' + '' + '</td>' +
'<td>' + '' + '</td>' +
'<td>' + usageAvg + '</td>' +
'<td>' + percentageAvg + '</td>')
.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);
});
});
This question has an accepted answers - jump to answer
Answers
You have
order: [[0, 'asc']],but yourrowGroup.dataSrcisdataSrc: [0, 1, 2, 3],. For RowGroup to work properly all of therowGroup.dataSrccolumns need to be order. Try usingorderFixedto force the ordering of those 4 columns at all times. The use can still order the remaining columns. Something like this:Kevin
@kthorngren , I tried changing the "order" to what you recommended but it doesn't seem to be doing anything. Thank you
Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Thank you @kthorngren , I have been able to recreate my problem successfully. Here is the link to the problem: http://live.datatables.net/bivemeko/1/edit?html,output
Vishal
Is this what you are looking for?
http://live.datatables.net/bivemeko/2/edit
I added the
groupto thetrreturned fromrowGroup.startRender, like this:I noticed you have
-ordering false. Maybe the DOM table is in the order you want so theorderFixedmight not do anything for you.Kevin
Yes thank you, that's part of what I'm looking for. The other problem is that the rowGroups for column 1,2,3 (with column 0 being "Apollo" and "Discovery") are not visible.
I changed the ordering to true now
When I remove the code to make the rowGroups collapse, the table works perfectly. Its only once the code for collapse is present that I lose the lower level rowGroupings
Can you update your test case to reflect that, please,
Colin
I pasted the if block from this example from this thread into your test case and it seems to work.
Pasted this:
http://live.datatables.net/bivemeko/8/edit
Your if block is different. Not sure what the goal is but it would take some debugging to determine why its not behaving as expected.
Kevin