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

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

cyrille.duvernecyrille.duverne Posts: 1Questions: 0Answers: 0

Link to test case: https://live.datatables.net/cubitadi/1/
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...

Replies

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited May 8

    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>Cotisation Mensuelle - 04/2024</td>
       <td>Cotisations</td>
       <td>Christophe GODEFROID</td>
       <td class='td-int'>14.17 €</td>
       <td><a href='/janus/res/pages/private/treasury/income/treasury_income_update.php?IncomeID=in_663a8c363f5fe6.91706766'><i class='fa-solid fa-file-pen'></i></a></td>
       <td><a href='/janus/res/scripts/treasury/income/income_db_delete.php?IncomeID=in_663a8c363f5fe6.91706766'><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:
    https://live.datatables.net/cubitadi/2/edit

    The other option is to combine the Action elements into one cell, like this:
    https://live.datatables.net/zuqojepe/1/edit

    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

Sign In or Register to comment.