Reputation: 10061

Subtotals in grouped row

I'm using jQuery Datatables and in my table I'm grouping by the values in the first column of the table and displaying all data with a matching first column in groups. I have 'Subtotal' rows within each of my groups that I would like to be displayed inline with the grouped row. Here is an example of what my table looks like now:

Example of how my datatable looks now

I want to get the cells from the 'Subtotal' row and put them in the grouped row. Like so:

How I'd like my datatable to look

Here's the current code for my datatable:

$('#table').dataTable( {
      "bFilter": true,
      "aaSorting": [[ 5, "desc" ]],
                "aaSortingFixed": [[ 0, "desc" ]],
      "columnDefs": [
          { "visible": false, "targets": 0 }
      ],
      "pageLength": 50,
                "aoColumns": [
        null,null,            { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num" },
        { "sSortDataType": "num-html", "sType": "formatted-num", "visible": false },
        { "sSortDataType": "num-html", "sType": "formatted-num", "visible": false },
        { "sSortDataType": "num-html", "sType": "formatted-num", "visible": false },
        { "sSortDataType": "num-html", "sType": "formatted-num", "visible": false }
      ],
      "sDom": "CTlfrt<'container'<'pull-left'i><'pull-right'p>>",
      "sPaginationType": "bootstrap",
                "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(0, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    "<tr class='group'><td colspan='"+18+"' style='background:#bcbcbc !important;'>"+group+"</td></tr>"
                );

                last = group;
            }
        } );
      },
                "oLanguage": {
        "sLengthMenu": "_MENU_ records per page"
      },
      "oTableTools": {
        "sSwfPath": "/public/swf/copy_csv_xls_pdf.swf",
        "aButtons": [
          "copy",
          "print",
          "csv"
        ]
      },
    } );

What Javascript can I use to do this for me whenever the table is drawn? Please let me know if you need any more information.

Upvotes: 1