How to create colspan on header with ajax loaded data

How to create colspan on header with ajax loaded data

jsilverjsilver Posts: 6Questions: 2Answers: 0
edited February 16 in Free community support

I'm trying to create colspan headers like the one shown in this example, 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,?

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 = {};
               = key;
                        my_item.title =  key;

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


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

This question has an accepted answers - jump to answer


Sign In or Register to comment.