Complex header and row grouping

topoluc

I have a jquery datatable with row grouping and I would like to make a complex header like this:

                                         Vialidad                                Conservacion

CERT TOTAL -------------------------------------------------------------------
Importe % Importe %

I've tried many things but none of them were useful.

This is my code:

$(document).ready(function() {
  var table = $('#mediciones').DataTable({
    "columnDefs": [
        { "targets": 1, "visible": false },
    ],
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();

        var last = null;

        api.column(1, {page: 'current'}).data().each(function (año, i) {
            if (last !== año) {
                $(rows).eq(i).before(
                    $("<tr></tr>", {"class": "group", "data-id": año}).append($("<td></td>", {"class": "año", "text": "AÑO "+año})).append($("<td></td>", {"id": año+"_total", "class": "noCount", "text": "0.00"}))
                    .append($("<td></td>", {"id": año+"_vial", "class": "noCount", "text": "0.00"})).append($("<td></td>", {"id": año+"_perc_vial", "class": "noCount", "text": "0.00"}))
                    .append($("<td></td>", {"id": año+"_ord", "class": "noCount", "text": "0.00"})).append($("<td></td>", {"id": año+"_perc_ord", "class": "noCount", "text": "0.00"})).prop('outerHTML')
                );
                last = año;
            }
            val = api.row(api.row($(rows).eq(i)).index()).data();

            $("#"+año+"_total").text(parseFloat($("#"+año+"_total").text()) + parseFloat(val[2]));

            if (val[3]=="") {
                $("#"+año+"_vial").text(parseFloat($("#"+año+"_vial").text()) + parseFloat("0.00"));
            } else {
                $("#"+año+"_vial").text(parseFloat($("#"+año+"_vial").text()) + parseFloat(val[3]));
            }
            $("#"+año+"_perc_vial").text((parseFloat($("#"+año+"_vial").text())*100/$("#"+año+"_total").text()).toFixed(2));

            if (val[5]=="") {
                $("#"+año+"_ord").text(parseFloat($("#"+año+"_ord").text()) + parseFloat("0.00"));
            } else {
                $("#"+año+"_ord").text(parseFloat($("#"+año+"_ord").text()) + parseFloat(val[5]));
            }
            $("#"+año+"_perc_ord").text((parseFloat($("#"+año+"_ord").text())*100/$("#"+año+"_total").text()).toFixed(2));
        });
    },
  });

});

https://jsfiddle.net/hxLsv1dw/25/

Thanks

topoluc

Sorry, the header example isn´t well formated. Please, see the file uploaded.