datatables don't support rowspan in tbody

datatables don't support rowspan in tbody

xyyl619xyyl619 Posts: 15Questions: 6Answers: 0
when using rowspan in tbody, tables can't be initialized with $("#table").Datatable(), the error message is as follows:

"Uncaught TypeError: Cannot set property 'innerHTML' of undefined".

 so if i want to write a complex table, with many rowspan and colspan used, what should i do? thanks.

This question has accepted answers - jump to:

Answers

  • SamuelNZSamuelNZ Posts: 62Questions: 5Answers: 2
    edited November 2015
    so if i want to write a complex table, with many rowspan and colspan used
    

    What is your need for rowspan and colspan?

    What exactly do you want to do?

    Have you tried the Responsive Extension?

    There are other Extensions aswell and DataTables seems to be able to do almost anything you would need to do to a table with rowspan and colspan.

  • SamuelNZSamuelNZ Posts: 62Questions: 5Answers: 2
    edited November 2015

    Please see Complex headers (rowspan / colspan)

    Unless i've misread somewhere, You aren't able to have tbody contain colspan or rowspan

  • xyyl619xyyl619 Posts: 15Questions: 6Answers: 0
    edited November 2015

    Thanks for answer,
    With Complex headers ,i know datatables can handle well, but with tbody containing rowspan, i don't know how to do with it.

    html is as follows:
    <thead>....</thead>
    <tbody>
    <tr>
    <td>name1</td>
    <td >name2</td>
    <td >name3</td>
    <td rowspan="3">name4</td>
    <td rowspan="2">name5</td>
    <td>name6</td>
    <td>name7</td>
    <td>name8</td>
    </tr>
    <tr>
    <td >a1</td>
    <td >a2</td>
    <td>a3</td>
    <td>a6</td>
    <td>a7</td>
    <td>a8</td>
    </tr>
    ...
    </tbody>

    if tables like that ara initialized with datatables, it'll throw errors like 'Uncaught TypeError: Cannot set property 'innerHTML' of undefined".'

  • SamuelNZSamuelNZ Posts: 62Questions: 5Answers: 2
    edited November 2015

    Your <tbody> doesn't contain any colspan or rowspans, Your row headers <td> do.

    So you should be using;

    // Wrap the colspan'ing header cells with a span so they can be positioned
        // absolutely - filling the available space, and no more.
        $('#example thead th[colspan]').wrapInner( '<span/>' ).append( '&nbsp;' );
    
  • xyyl619xyyl619 Posts: 15Questions: 6Answers: 0

    i know how to deal with colspan, but don't know how with rowspan.

    Totally speaking,I would like to make my cells merge in the first column where the text in the cell above is the same, etc. Just wondering if this is possible and if there are any plugins available for that?

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    There is no option to use rowspan or colspan in the tbody in DataTables at this time - sorry. It adds a lot of complexity to the sorting and filtering which is why it is not currently possible.

    It can be done in a fixed column (using the FixedColumns extension and some custom callback code) since that is operating on a clone of the cells, and therefore can be destructive in the DOM - but there is no option to do it in DataTables core and likely won't be unless someone is willing to fund a lot of development :-)

    Allan

  • SamuelNZSamuelNZ Posts: 62Questions: 5Answers: 2
    edited November 2015 Answer ✓

    "Totally speaking,I would like to make my cells merge in the first column where the text in the cell above is the same, etc. Just wondering if this is possible and if there are any plugins available for that?"

    You could possibly use columns.render to "merge" the data before it goes into the column, But i don't have a snippet handy.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    I'm not 100% sure you could actually - or if you can it would be really messy. The reason being is that the renderer happens independently of other rows - generally of other cells all together, but you can use information from the rest of the row when you use it as a function.

    You'd need to maintain a reference to the other cells that have been rendered - convert to the order displayed in the DataTable and modify the output as required. The worst part is that you'd need to invalidate the cells on every draw, since otherwise empty cells might be shown out of sequence.

    So, yes, possible. But not something I'd advise.

    Regards,
    Allan

This discussion has been closed.