In order to start with the groups collapsed you need to move the lines I suggested above into initComplete. Otherwise it executes before the ajax response as ajax is an asynchronous process.
More importantly you found an old example to work with. Originally the RowGroup extension used the class group-start but that changed at some point. The classname now is dtrg-group. Here is the updated example: http://live.datatables.net/ruhuguwu/15/edit
I wanted the aggregate row to display the 'Extn' value from the child row as well. How do we display:
1) The 'Extn' value from the only the first child row?
2) A Comma separated list of all 'Extn' values in the child rows
rows.every(function ( rowIdx, tableLoop, rowLoop ) {
var data = this.data();
console.log(data)
// ... do something with data(), or this.node(), etc
});
rows in rows.every(....); is the rows function parameter.
@colin & @kthorngren, Your help in this is really appreciated you have helped me get most of the way to my goal! Whilst a schoch beyond the OP do you have a code direction that would let sort work and maintain the homogenous groups (Only one Group1, Group2 etc)?
@khaos If I understand your question you would use orderFixed to set the order of the rowGroup.dataSrc columns. This will allow the user to sort any other columns without affecting the groups.
Hi, My expand all in datatable to take times 5 to 8 sec how to solve in 1 to 3 sec???
$(".expand-all").click(function(e) {
e.stopImmediatePropagation();
var name;
collapsedGroups = [];
$(".dataTables_processing").show("fast", function() {
var _dataSrc = tableNew.rowGroup().dataSrc();
var tableArray = [];
var dataSrcArray = Object.keys(_dataSrc);
var aggregationIndex = 0;
_dataSrc.forEach(function(_dataSrcIndex) {
tableArray.push(tableNew.column(_dataSrcIndex).data())
})
//WE DON'T NEED TO EXCECUTE THE CHILDS, SO WE USE THE BELOW VARIABLE TO AVOID THE TIME CONSUME
for(j=0; j<tableArray.length; j++){
aggregationIndex = aggregationIndex +1;
//WE NEED TO ITERATE ONLY THE PARENT AND THE LAST CHILD
if(aggregationIndex == 1){
tableArray[j].unique().each( function ( name, index ) {
//WHEN THERE IS MULTIPLE AGGREGATION WE HAVE TO SHOW THE PARENT ROW
if(j>0){
for(k=0; k< tableArray[0].unique().length;k++){
var parent = tableArray[0][k];
collapsedGroups[parent+name] = false;
}
}else{
collapsedGroups[name] = false;
}
} );
}
}
rowGroup: {
startRender: function ( rows, group, level) {
var all;
if (level === 0) {
top = group;
all = group;
} else {
// if parent collapsed, nothing to do
if (!!collapsedGroups[top]) {
return;
}
//THIS IS TO AVOID THE GROUP EMPTY VALUE WHILE COLLAPSE
if(group==''){
all = top + '-';
}else{
all = top + group;
}
}
var collapsed = !!collapsedGroups[all];
//var collapsed = true;
rows.nodes().each(function (r) {
r.style.display = collapsed ? 'none' : '';
});
var x = 0;
var classColumn = "";
var checkUncountable = false;
var xTd = 1;
//loop to get group's total
var group_values = new Array();
var group_column_values = new Array();
//var end_loop = $('#reorder-new').DataTable().columns(':visible').count();
var end_loop = $('#'+table_id).DataTable().columns().count();
var tableNew = $('#'+table_id).DataTable();
var gpIndex = tableNew.column('#gross-profit').index();
var jobsIndex = tableNew.column('#jobs').index();
//if we have GP, decrease the loop end
if(gpIndex != '' && gpIndex != 'undefined') {
end_loop = end_loop-1;
}
//GET THE AGGREAGATE COLUMNS
var updatedGroupColumn = groupColumn.toString();
//console.log("updatedGroupColumn = "+updatedGroupColumn);
var groupColumnArray = updatedGroupColumn.split(',');
//ADD THE GROUP IN EACH ITERATION TO CHECK THE PAST GROUP
if(level == 0){
recentLevelZero.push(group);
}else if(level == 1){
recentLevelOne.push(group);
}else if(level == 2){
recentLevelTwo.push(group);
}else if(level == 3){
recentLevelThree.push(group);
}else if(level == 4){
recentLevelFour.push(group);
}else if(level == 5){
recentLevelFive.push(group);
}
rows.rows({page:'all',search: 'applied'}).data().filter(function(value, index) {
x=0;
var flagTotal = 0;
//FIND THE TOTAL OF FIRST LEVEL AGGREAGATION
if(level == 0){
//COMPARE THE CURRENT VALUE WITH THE CURRENT GROUP
if(value[groupColumnArray[level]] == group){
flagTotal = 1;
}
//FIND THE TOTAL OF SECOND LEVEL AGGREAGATION
}else if(level == 1){
//COMPARE THE CURRENT VALUE WITH THE CURRENT GROUP AND ALSO COMPARE THE LEVEL ZERO VALUE WITH CURRENT VALUE
if((value[groupColumnArray[level]] == group) && (value[groupColumnArray[level-1]] == recentLevelZero[recentLevelZero.length-1])){
flagTotal = 1;
}
//FIND THE TOTAL OF THIRD LEVEL AGGREAGATION
}else if(level == 2){
//COMPARE THE CURRENT VALUE WITH THE CURRENT GROUP AND ALSO COMPARE THE LEVEL ZERO VALUE WITH CURRENT VALUE AND ALSO COMPARE THE LEVEL ONE VALUE WITH CURRENT VALUE
if((value[groupColumnArray[level]] == group) && (value[groupColumnArray[level-1]] == recentLevelOne[recentLevelOne.length-1])&& (value[groupColumnArray[level-2]] == recentLevelZero[recentLevelZero.length-1])){
flagTotal = 1;
}
//FIND THE TOTAL OF FOURTH LEVEL AGGREAGATION
}else if(level == 3){
//COMPARE THE CURRENT VALUE WITH THE CURRENT GROUP AND ALSO COMPARE THE LEVEL ZERO VALUE WITH CURRENT VALUE AND ALSO COMPARE THE LEVEL ONE VALUE WITH CURRENT VALUE
if((value[groupColumnArray[level]] == group) && (value[groupColumnArray[level-1]] == recentLevelTwo[recentLevelTwo.length-1]) && (value[groupColumnArray[level-2]] == recentLevelOne[recentLevelOne.length-1])&& (value[groupColumnArray[level-3]] == recentLevelZero[recentLevelZero.length-1])){
flagTotal = 1;
}
//FIND THE TOTAL OF FIFTH LEVEL AGGREAGATION
}else if(level == 4){
//COMPARE THE CURRENT VALUE WITH THE CURRENT GROUP AND ALSO COMPARE THE LEVEL ZERO VALUE WITH CURRENT VALUE AND ALSO COMPARE THE LEVEL ONE VALUE WITH CURRENT VALUE
if((value[groupColumnArray[level]] == group)&& (value[groupColumnArray[level-1]] == recentLevelThree[recentLevelThree.length-1]) && (value[groupColumnArray[level-2]] == recentLevelTwo[recentLevelTwo.length-1]) && (value[groupColumnArray[level-3]] == recentLevelOne[recentLevelOne.length-1])&& (value[groupColumnArray[level-4]] == recentLevelZero[recentLevelZero.length-1])){
flagTotal = 1;
}
//FIND THE TOTAL OF SIXTH LEVEL AGGREAGATION
}else if(level == 5){
//COMPARE THE CURRENT VALUE WITH THE CURRENT GROUP AND ALSO COMPARE THE LEVEL ZERO VALUE WITH CURRENT VALUE AND ALSO COMPARE THE LEVEL ONE VALUE WITH CURRENT VALUE
if((value[groupColumnArray[level]] == group) && (value[groupColumnArray[level-1]] == recentLevelFour[recentLevelFour.length-1]) && (value[groupColumnArray[level-2]] == recentLevelThree[recentLevelThree.length-1]) && (value[groupColumnArray[level-3]] == recentLevelTwo[recentLevelTwo.length-1]) && (value[groupColumnArray[level-4]] == recentLevelOne[recentLevelOne.length-1])&& (value[groupColumnArray[level-5]] == recentLevelZero[recentLevelZero.length-1])){
flagTotal = 1;
}
}
if(flagTotal == 1){
while(x <= end_loop) {
var val = value[x].replaceAll(".","");
val = val.replaceAll(",",".");
if(val.length == '1') {
val = val.replaceAll("-","0");
}
//CHECK IF UNCOUNTABLE COLUMN
checkUncountable = false;
//var columns = $('#'+table_id).dataTable().dataTableSettings[0].aoColumns;
tableNew = $('#'+table_id).DataTable();
var columns = tableNew.settings()[0].aoColumns;
$.each(columns, function(i,v) {
if(v.sTitle.toLowerCase().indexOf("duplicate") < 0 && v.nTh.className.includes('uncountable') && v.bVisible == true && x==i){
checkUncountable = true;
}
});
if(isNaN(val) || checkUncountable){
group_values[x]="";
}else{
if (isNaN(group_values[x])) {
group_values[x] = parseFloat(val);
}else{
group_values[x] = parseFloat(group_values[x])+ parseFloat(val);
}
}
x++;
}
}
});
above code for group sum this is render more time for all the problem
Replies
In order to start with the groups collapsed you need to move the lines I suggested above into
initComplete. Otherwise it executes before the ajax response as ajax is an asynchronous process.More importantly you found an old example to work with. Originally the RowGroup extension used the class
group-startbut that changed at some point. The classname now isdtrg-group. Here is the updated example:http://live.datatables.net/ruhuguwu/15/edit
Kevin
It looks like the classes have changed for RowGroup - you need
tr.dtrg-startnow, see here: http://live.datatables.net/ruhuguwu/17/editColin
Awesome, thanks @kthorngren and @colin. Had no idea about the class changing.
One last thing, I added salarySum on the aggregate row: http://live.datatables.net/ruhuguwu/20/edit.
I wanted the aggregate row to display the 'Extn' value from the child row as well. How do we display:
1) The 'Extn' value from the only the first child row?
2) A Comma separated list of all 'Extn' values in the child rows
The
rowGroup.startRenderfunction has three parameters with the first being the array of rows in the group.You can use
rows[0]to get the first row.You can use
rows().every()to loop through all therowsin the group. This is a long ]example](https://jsfiddle.net/t36on5mv/) but you can see therows().every()loop in therowGroup.startRenderfunction. The example is from this thread. This is the specific code:rowsinrows.every(....);is therowsfunction parameter.Kevin
@colin & @kthorngren, Your help in this is really appreciated you have helped me get most of the way to my goal! Whilst a schoch beyond the OP do you have a code direction that would let sort work and maintain the homogenous groups (Only one Group1, Group2 etc)?
@khaos If I understand your question you would use
orderFixedto set the order of therowGroup.dataSrccolumns. This will allow the user to sort any other columns without affecting the groups.Kevin
I will check this out Friday.
Being able to sort the grouped rows will be amazing.
@colin when I saw your sample in the first live datatables, i was wondering how to insert the group own data instead of sum, is that possible to do?
Hi, My expand all in datatable to take times 5 to 8 sec how to solve in 1 to 3 sec???
$(".expand-all").click(function(e) {
e.stopImmediatePropagation();
var name;
collapsedGroups = [];
$(".dataTables_processing").show("fast", function() {
var _dataSrc = tableNew.rowGroup().dataSrc();
var tableArray = [];
var dataSrcArray = Object.keys(_dataSrc);
var aggregationIndex = 0;
_dataSrc.forEach(function(_dataSrcIndex) {
tableArray.push(tableNew.column(_dataSrcIndex).data())
})
//WE DON'T NEED TO EXCECUTE THE CHILDS, SO WE USE THE BELOW VARIABLE TO AVOID THE TIME CONSUME
for(j=0; j<tableArray.length; j++){
aggregationIndex = aggregationIndex +1;
//WE NEED TO ITERATE ONLY THE PARENT AND THE LAST CHILD
if(aggregationIndex == 1){
tableArray[j].unique().each( function ( name, index ) {
//WHEN THERE IS MULTIPLE AGGREGATION WE HAVE TO SHOW THE PARENT ROW
if(j>0){
for(k=0; k< tableArray[0].unique().length;k++){
var parent = tableArray[0][k];
collapsedGroups[parent+name] = false;
}
}else{
collapsedGroups[name] = false;
}
} );
}
}
@farhan07 - This isn't relevant to this thread, and you have posted elsewhere too. Please only post once.
Colin
rowGroup: {
startRender: function ( rows, group, level) {
var all;
if (level === 0) {
top = group;
all = group;
} else {
// if parent collapsed, nothing to do
if (!!collapsedGroups[top]) {
return;
}
//THIS IS TO AVOID THE GROUP EMPTY VALUE WHILE COLLAPSE
if(group==''){
all = top + '-';
}else{
all = top + group;
}
}
var collapsed = !!collapsedGroups[all];
//var collapsed = true;
above code for group sum this is render more time for all the problem