jquery datatables change row grouping with select

Question

I am using the grouping method described here Row Grouping

and it is working fine as is.

However I am now looking to be able to change what column the rows are grouped by, by changing a select option.

Now I found a question in the forums which has the following solution.

// Just redraw
function Redraw(ordered){
    $('#table1').dataTable().fnSettings().aoDrawCallback.push( {
        "fn": function ( settings ) {
            var api = this.api();
            var rows = api.rows().nodes();
            var last=null;

            api.column(ordered).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td style="text-align:left" colspan="15">'+group+'</td></tr>'
                    );

                    last = group;
                }
            } );
        }
        } );
    $('#table1').DataTable().draw(false);
}

Which I pass the column id the table should be grouped by. This is half what I need as it now ADDS the grouping on top of original grouping.

Is this due to the new function being pushed to the aoDrawCallback as opposed to replacing it?

Any idea how I can just replace the original callback (and remove grouping) then draw with the new callback function?

Any help appreciated!

Answer 1

Ok found it - pretty straight forward actually.

I found an answer here that lead me to the right method. So in my initialization code the draw callback function is passed global variable (ID of column) to order on:

var table = $('#table1').DataTable( {
        data : data,
        scrollCollapse: true,
        paging:         false,
        "order": [[ groupCol, "desc" ]],
        "dom": '<"selector">frtip',
        "columnDefs": 
            [{ 
                className: "fa fa-plus-circle firstCol", 
                "targets": 0 ,
            },{ 
                className: "descriptionText", 
                "targets": [3,6,10,16] ,
            },{
                "targets": 0,
                "orderable":false,
                "defaultvalue":''
             },
             {
                "targets": [1,4,5,7,9,11,12,13,14,15,16,17,18,19,20,21],
                "visible": false,
                "searchable":true
            }],
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows().nodes();
            var last=null;

            api.column(groupCol).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td style="text-align:left" colspan="15">'+group+'</td></tr>'
                    );

                    last = group;
                }
            } );
        }
    } );

To change this I just have the global variable changed when the select input is changed and then redraw the table.

    $('#grouping').on('change',function(){
    var table = $('#table1').DataTable();
        switch(this.value.toUpperCase()){
        case "TOOL":
            groupCol=1;
            break;
        case "COMP":
            groupCol=5;
            break;
        default:
            groupCol=1;
        }
        table.draw(groupCol);
})

So I was initially looking at a method to hard code the column ID into the callback function and change the whole function whereas now I am using a variable and just redrawing which fires the callback function!