Complex headers

dougsm

Is it possible to render the header below using json only definition?

  <thead>
        <tr>
            <th rowspan="2">Name</th>
            <th colspan="2">HR Information</th>
            <th colspan="3">Contact</th>
        </tr>
        <tr>
            <th>Position</th>
            <th>Salary</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>

I only found simple header example like this

    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );

https://datatables.net/examples/advanced_init/complex_header.html

kthorngren

This is from the columns.title docs:

Please note that when constructing a header, DataTables can only construct a simple header with a single cell for each column. Complex headers with colspan and rowspan attributes must either already be defined in the document, or be constructed using standard DOM / jQuery methods.

You would need to fetch the JSON column definitions and build the thead before initializing Datatables.

Kevin

letscode

I'm not clear on how to do it. Can someone provide a example of complex header using coumns.title

kthorngren

As the docs state columns.title will not create complex headers. You will need to use another method like jQuery to populate the complex headers. This is outside the scope of the Datatables application and I don't remember seeing anyone post a complex header example. You can probably find an example on stackoverflow.com on how to use jQuery to build the headers for you.

Kevin