Collapse / Expand Click Groups

kthorngren

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

Kevin

colin

It looks like the classes have changed for RowGroup - you need tr.dtrg-start now, see here: http://live.datatables.net/ruhuguwu/17/edit

Colin

Schnitzer

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

kthorngren

The rowGroup.startRender function has three parameters with the first being the array of rows in the group.

1) The 'Extn' value from the only the first child row?

You can use rows[0] to get the first row.

2) A Comma separated list of all 'Extn' values in the child rows

You can use rows().every() to loop through all the rows in the group. This is a long ]example](https://jsfiddle.net/t36on5mv/) but you can see the rows().every() loop in the rowGroup.startRender function. The example is from this thread. This is the specific code:

                 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.

Kevin

khaos

@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)?

kthorngren

@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.

Kevin

khaos

I will check this out Friday. Being able to sort the grouped rows will be amazing.

deianearra

@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?

farhan07

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

            nonNumericColumns(true,table_id,tableNew,groupColumn);

            //$('#collapse-all').attr('id','collapse-partial');
            $('.collapse-all').addClass('collapse-partial');
            $('.collapse-all').removeClass('collapse-partial');
            tableNew.page.len(100).draw(false);
            /*tableNew.draw(false); */
            $(".dataTables_processing").hide();   
        }); 
    });

colin

@farhan07 - This isn't relevant to this thread, and you have posted elsewhere too. Please only post once.

Colin

farhan07

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