Datatables: Showing a summary row for sub rows - datatables

Question

I'm new to Datatables...
I'm making a grid of rows, each with sub (details) rows. I'm using server-side data from a mysql database. It is returned as JSON containing all sub rows.
I need to create the "main" grid rows, summing up columns from the sub rows. I'm not sure if Datatables can do this or how it is done...
I'm thinking about starting by getting the JSON in a JQuery function. Then using a loop to sum up data I need and pass that on to the grid as array-data. Lastly I render the grid.
Is this best practice or is Datatables capable of doing it in a smarter way?
-- the concept of sub rows can be seen here: http://datatables.net/blog/Drill-down_rows --

Answer 1

I have completed something like this. I returned all the data I needed and put the "details" information into the last column in a hidden div. Then used a row click to put that information into the details row.
//In the example the table the first column has a plus icon that gets replace with a minus icon
// the last column added a hidden div that contained the details.
$("#results").dataTable({
"fnCreatedRow": function (nRow, aData, iDataIndex) {
//Attach the on click event to the row
var oTable = this;
$("td:eq(0) span", nRow).on("click", function () {
//First column has a image with the jQuery UI plus icon
if ($(this).hasClass("ui-icon-circle-plus")) {
//The details information is stored in the last column in a hidden div with the class wrapper
//Grab the hidden information and append that to the new row.
oTable.fnOpen(nRow, $(".wraper", nRow).html(), "details");
} else {
oTable.fnClose(nRow);
}
$(this).toggleClass("ui-icon-circle-plus ui-icon-circle-minus");
});
}
});