How to use rowspan and colspan in tbody using datatable.js?

javascript jquery datatables
krutssss picture krutssss · Dec 4, 2014 · Viewed 71.1k times · Source

Whenever I use <td colspan="x"></td>, I get the following error:

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined(…)

Demo

It's working properly without DataTables.js, but when we use this structure with datatable.js it is not working. We need above table structure. Does anyone have any idea how we can use this table structure datatable.js?

Answer

Dirk Bergstrom picture Dirk Bergstrom · Dec 1, 2015

You can hack around the lack of colspan support by adding an "invisible" cell for every cell that's eliminated:

<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>Normal column</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>

DataTables doesn't complain, the table renders normally and sorting works (invisible columns sort as the empty string).

I haven't tried this with rowspan.

Related questions

How to reload/refresh jQuery dataTable?

I am trying to implement functionality whereby clicking a button on the screen will cause my jQuery dataTable to refresh (as the server-side data source may have changed since the dataTable was created). Here's what I have: $(document).ready(function() { $("#…

Read More
TypeError: $(...).DataTable is not a function

I am trying to work with jQuery's Datatable JS for my project from this link. I downloaded the complete library from the same source. All the examples given in the package seem to work fine, but when I try to …

Read More
Disable sorting for a particular column in jQuery DataTables

I am using the jQuery DataTables plugin to sort the table fields. My question is: how do I disable sorting for a particular column? I have tried with the following code, but it did not work: "aoColumns": [ { "bSearchable": false }, null ] …

Read More