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

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

cyrille.duvernecyrille.duverne Posts: 4Questions: 0Answers: 0
edited May 21 in Free community support

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...

Replies

  • kthorngrenkthorngren Posts: 21,193Questions: 26Answers: 4,925
    edited May 21

    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.duvernecyrille.duverne Posts: 4Questions: 0Answers: 0

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

  • kthorngrenkthorngren Posts: 21,193Questions: 26Answers: 4,925

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

    Kevin

  • allanallan Posts: 63,277Questions: 1Answers: 10,424 Site admin

    Done now.

    Allan

  • cyrille.duvernecyrille.duverne Posts: 4Questions: 0Answers: 0
    edited May 21

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

  • allanallan Posts: 63,277Questions: 1Answers: 10,424 Site admin

    Also done.

  • cyrille.duvernecyrille.duverne Posts: 4Questions: 0Answers: 0

    Thanks Allan !

Sign In or Register to comment.