JQuery DataTables - Row Grouping, Sum, Collapsible, Export

Question

I've been using JQuery DataTables for a long time. This is the first time I'll be working with row grouping. I found a good example of where I want to start. - Grouping

1. How would I add an extra <td> to the grouped row? What if I wanted to display the sum of the grouped salaries on that grouped row? Right now, it looks like you can only display the name of the group.

2. Can I make these rows collapsible like they are Here and Here? It looks like this is a different plugin than the original grouping code. This look would be my preference, but working with child rows doesn't seem to be the same as grouping.

Additional Info

I will be returning data from an Ajax source.

UPDATE 1

So, I built a table with row grouping and found this example of how to sum up a column. I'm plugging that value into a <td> in that group row. All I need now is how to break that sum amount up into the groups instead of the sum of the entire column. I need help with this.

"drawCallback": function (settings) {
    var api = this.api(), data;
    var rows = api.rows({ page: 'current' }).nodes();
    var last = null;

    //Calculates the total of the column
    var total = api
        .column(5)  //the salary column
        .data()
        .reduce(function (a, b) {
            return a + b;
        }, 0);

    //Groups the Office column
    api.column(2, { page: 'current' }).data().each(function (group, i) {
        if (last !== group) {
            $(rows).eq(i).before(
                '<tr class="group"><td>' + group 
                 + '</td><td></td><td></td><td></td><td>' 
                 + total + '</td></tr>'
            );

            last = group;
        }
    });                  
}

UPDATE 2

It doesn't look to me like DataTables can provide all the functionality I need. Row grouping doesn't have built in subtotals or collapsiblity. Even if I'm able to create something custom to do that, it looks like these group rows aren't picked up during exports, which is another requirement I need. I'll probably have to go another route. Unless someone can fulfill all of these needs, don't bother.

UPDATE 3

I've decided to go with Kendo Grids instead. All of this functionality is built in already.

Answer 1

"drawCallback": function ( settings ) {
	var api = this.api(),data;
	var rows = api.rows( {page:'current'} ).nodes();
	var last=null;
	
	// Remove the formatting to get integer data for summation
	var intVal = function ( i ) {
		return typeof i === 'string' ?
			i.replace(/[\$,]/g, '')*1 :
			typeof i === 'number' ?
				i : 0;
	};

	total=new Array();
	api.column(2, {page:'current'} ).data().each( function ( group, i ) {
	    group_assoc=group.replace(' ',"_");
        if(typeof total[group_assoc] != 'undefined'){
            total[group_assoc]=total[group_assoc]+intVal(api.column(5).data()[i]);
        }else{
            total[group_assoc]=intVal(api.column(5).data()[i]);
        }
		if ( last !== group ) {
			$(rows).eq( i ).before(
				'<tr class="group"><td colspan="4">'+group+'</td><td class="'+group_assoc+'"></td></tr>'
			);
			
			last = group;
		}
	} );
    for(var key in total) {
        $("."+key).html("$"+total[key]);
    }
}