Colspan in dataTable with JavaScript

Question

I did this :

I would like display a header (e.g : 2013) with 2 colums (e.g : CA and Total) like here enter link description here

In this example, you can see "Scottish domiciled students in HE" header with several columns.

Here is my javasript code :

function fillDataTable2Years5(data) {

if ($("#table_campaigns").css("visibility") == "hidden")
    $("#table_campaigns").css("visibility", "visible");

$('#table_campaigns').dataTable({
    'aaData': data,
    'aoColumns': [
        { "sTitle": "", "sCellType": "th", "fnCreatedCell": function (cell) { cell.scope = 'row'; } },
        { "sTitle": "2013 CA" },
        { "sTitle": "2013 Aantallen" },
        { "sTitle": "2014 CA" },
        { "sTitle": "2014 Aantallen" }
    ],
    "iDisplayLength": 10,
    "bJQueryUI": true,
    "bDestroy": true,
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false
});
}

How could I do that?

Answer 1

You can do that using Column Grouping in DataTables. See the link below: https://datatables.net/examples/advanced_init/complex_header.html

This is done using the HTML colspan and rowspan attributes, as you can see by inspecting the src code of the example page. They dont seem to show you that explicitly in the content though.