datatables don't support rowspan in tbody

xyyl619

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.

SamuelNZ

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.

SamuelNZ

Please see Complex headers (rowspan / colspan)

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

xyyl619

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

SamuelNZ

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;' );

xyyl619

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?

allan

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

SamuelNZ

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

allan

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