Datatables change layout dynamically with complex header

Axxlfoley

Hi guys,

I'm using datatables with a complex header to display some data my energy meter. On a press of a button new table data gets fetched via ajax from the backend. I do not want to create several html pages to show a specific table structure, I want it to work with javascript functions.

My biggest issue at the moment is that the basic structure of the table specified in my HTML page cannot really be changed to a new format. (e.g. change the complex header rowspan and colspan of , my first <thead> row. I tried several ways to modify the DOM structure an injekt new HTML.. no sucess.. datatables always uses the structure specifed in the HTML.

  <thead style="font-size: small">
   <tr>
    <th rowspan="2">RowSpan</th>
    <th colspan="2">test</th>
    
<th colspan="2">test</th>
    <th colspan="3">test</th>
   </tr>
   <tr>
     <th>dummy_col1</th> 
     <th>dummy_col2</th> 
     <th>dummy_col3</th>
     <th>dummy_col4</th> 
     <th>dummy_col5</th> 
     <th>dummy_col6</th> 
     <th>dummy_col7</th> 
   </tr>
</thead>

On click of a button it should use something like this:

  <thead style="font-size: small">
   <tr>
    <th rowspan="2">RowSpan</th>
    <th colspan="2">test</th>
    <th colspan="2">test</th>
    <th colspan="2">test</th>
    <th colspan="3">test</th>
   </tr>
   <tr>
     <th>dummy_col1</th> 
     <th>dummy_col2</th> 
     <th>dummy_col3</th>
     <th>dummy_col4</th> 
     <th>dummy_col5</th> 
     <th>dummy_col6</th> 
     <th>dummy_col7</th> 
     <th>dummy_col8</th> 
     <th>dummy_col9</th> 
   </tr>
</thead>

Is it possible ?