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