How to create colspan on header with ajax loaded data

I'm trying to create colspan headers like the one shown in this example https://datatables.net/examples/basic_init/complex_header.html, but I want to do this programmatically using the DataTable initialization or API.

In my example below, I'm dynamically generating the column definitions directly from the json so I can avoid manually creating an html table in this same file. The code below works (although in real life the "my_data" value will come from an separate ajax call) but I can't figure out how to generate colspan. How can I programmatically generate the "HR Information" and "Contact" colspan items like https://datatables.net/examples/basic_init/complex_header.html,?

var my_data =
[
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       5421
        },
        {
            "name": "Garrett Winters",
            "position": "Director",
            "salary": "5300",
            "start_date": "2011/07/25",
            "office": "Edinburgh",
            "extn": "8422"
        },
];


var my_columns = [];
function fillCols(dataSet) {
        var x = dataSet[0];
        $.each( x, function( key, value ) {
                        var my_item = {};
                        my_item.data = key;
                        my_item.title =  key;
                        my_columns.push(my_item);
        });
};

$(document).ready(function() {
    fillCols(my_data)
    $('#example').DataTable( {
    data : my_data,
    columns: my_columns
    } );
} );

</script>

<table id="example" class="display" style="width:100%">
    </table>
</html>