Complex header : Using a colspan=2 breaks the whole Datatable

cyrille.duverne

Link to test case: Removed
Debugger code (debug.datatables.net): epezac
Error messages shown: "Uncaught TypeError: oCol is undefined"
Description of problem:

Whenever I try to use a colspan in the thead section, the code breaks and an extra <th> is added to the code.
I followed this doc : https://datatables.net/examples/basic_init/complex_header.html

Could you please help ?
I'm not a huge Js expert...

kthorngren

You defined 6 th tags for the header. Datatables sees this as 6 columns not 7 because of the colspan:

            <tr>
              <th>Date</th>
              <th>Description</th>
              <th>Catégorie</th>
              <th>Source</th>
              <th>Montant</th>
              <th colspan="2">Actions</th>
            </tr>

The table has 7 columns of data:

<tr>
   <td>07-05-2024</td>
   <td><removed> - 04/2024</td>
   <td><removed></td>
   <td>-</td>
   <td class='td-int'>14.17 €</td>
   <td><a href='-'><i class='fa-solid fa-file-pen'></i></a></td>
   <td><a href='-'><i class='fa-solid fa-trash'></i></a></a></td>
<tr>  <<<=== should be </tr>

One option is to create two th tags for the Action column, like this:
Removed

The other option is to combine the Action elements into one cell, like this:
Removed

Also you should create the tbody. The closing tr tag for each row should be </tr>. See my note in the above code snippet.

The HTML docs provide the Datatables requirements for the HTML table.

Kevin

cyrille.duverne

Great ! Thanks Kevin !
Some of the data in the bin aren't supposed to be public, would you mind removing them please ?

kthorngren

I don't have access to remove them but asked Allan to. He should respond to this thread when done.

Kevin

allan

Done now.

Allan

cyrille.duverne

Wonderful ! Thanks !
Kevin, could you also remove X's name and the URL in the last 2 fields from the snippet ?
Cheers !

allan

Also done.

cyrille.duverne

Thanks Allan !