Dynamically add headers in table datatable

Question

Is it possible to work with 2 rows in THEAD with dataTables?

<table>
    <thead>
        ## row 1
        ## row 2
    </thead>
    <tbody></tbody>
</table>

In row 1 I need 2 single columns and one column with colspan="3":

<tr>
    <th></th>
    <th></th>
    <th colspan="3"></th>
</tr>

And in row 2 I need 5 columns:

<tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
</tr>

But I have a case where I don't need 5 columns, but only 3.

Can this be generated dynamically?

UPDATE: I tried: http://datatables.net/release-datatables/examples/basic_init/complex_header.html

But there's no good example how it's generated.

"But I have a case where I don't need 5 columns, but only 3." do you mean for both rows or just the 2nd - can you show examples for both cases? — Chris Moutray
– Chris Moutray, Commented Jul 31, 2012 at 8:17

simbabque · Accepted Answer · 2012-07-31 08:16:57Z

1

If you look at the source code of the example link you posted, it seems quite clear:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th rowspan="2">Rendering engine</th>
            <th rowspan="2">Browser</th>
            <th colspan="3">Details</th>
        </tr>
        <tr>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th rowspan="2">Rendering engine</th>
            <th rowspan="2">Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
        <tr>
            <th colspan="3">Details</th>
        </tr>
    </tfoot>

(Code lifted from link above)

A word on viewing source code: In Firefox you can press ctrl + u to view the page source code. Even if there is heavy jQuery action on the page, the source code in that window will always be the original one without DOM modifications.

answered Jul 31, 2012 at 8:16

simbabque

54.4k8 gold badges77 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nelsonvarela Over a year ago

Ok this I understand, understood allready. Lets say I don't need column 'Details'. Can I change the headers within the .dataTable function? By changing aoColumns or a function...?

simbabque Over a year ago

@iam: I have no idea. Why do you put data in the HTML that you do not want? Just leave it out and adjust the HTML accodingly. Or look at fnSetColumnVis at datatables.net/api. I'm not sure I understand what you want to do. Please make it more clear.

Allan Jardine Over a year ago

If you don't want the 'Details' column can you not just remove it from the HTML? Basically in DataTables you must have a cell that will uniquely address each column (i.e. a cell that you can click on to sort a column etc). You can have as many colspans etc as you want, but there must be that ability to reference each column.

Collectives™ on Stack Overflow

Dynamically add headers in table datatable

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related