jQuery DataTables - Multiple Rows in Table Header - html

Question

I have a table with multiple rows in the thead and DataTables doesn't like it.
Here is my code:
<TABLE ID="TBL">
<THEAD>
<TR>
<TH>COL1</TH>
<TH>COL2</TH>
<TH>COL3</TH>
<TH>COL4</TH>
<TH>COL5</TH>
<TH>COL6</TH>
</TR>
<TR>
<TH>DAT1</TH>
<TH>DAT2</TH>
<TH>DAT3</TH>
<TH>DAT4</TH>
<TH>DAT5</TH>
<TH>DAT6</TH>
</TR>
<TR>
<TH>COLA</TH>
<TH>COLB</TH>
<TH>COLC</TH>
<TH COLSPAN="2">COLD</TH>
<TH>COLF</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>TD1</TD>
<TD>TD2</TD>
<TD>TD3</TD>
<TD COLSPAN="2">TD4</TD>
<TD>TD6</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT>
$("#TBL").DataTable();
</SCRIPT>
I can tell dataTables does get initialized on the table but my paging, sorting, and searching controls are missing.
Is there a way to configure dataTables to work here?
I was able to get it to work somewhat by doing this:
$("#TBL").DataTable({
columns:[
{data:"COLA"},
{data:"COLB"},
{data:"COLC"},
{data:"COLD"}
{data:"COLF"}
]
)
Adding data parameters to the columns made the table work, I can search, sort, and page results. However, once it gets to 'COLD' it jumps to the upper row and wants to sort 'DAT5' and 'DAT6', so I have to set them to 'orderable:false'.
I also noticed that, while having these data declarations causes the table to work, for the most part, I seem to be unable to change the width of the columns and I'm not sure the proper syntax for doing so.
My assumption was to do something like this, where I have the 'data' declarations:
columns:[
{data:"COLA", width:"150px"},
{data:"COLB"},
{data:"COLC"},
{data:"COLD"},
{data:"COLF"}
]
But the width setting seems to have no effect. I don't know if I'm doing something wrong or if my settings aren't taking effect, simply because I have multiple rows in the THEAD and it's throwing everything off.
I also have a columnDefs section:
columnDefs:[
{
targets:[3,4],
orderable:false
}
]
This corrects the 'DAT5' and 'DAT6' from being sortable. I think I can set column widths in here as well but I'm unsure of the syntax or how to setup multiple targets/settings side by side within columnDefs.
Anyone have any advice on how to properly set this up?
Thanks

Answer 1

DataTables does not support <colspan> in the body of a table:
<TD COLSPAN="2">TD4</TD>
From the installation documentation:
Please also note that while DataTables supports colspan and rowspan in the table's header and footer, they are not supported in the table's tbody and must not be present.
You will need to find a different way to structure your table to avoid this restriction.