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

Question

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

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

Demo

$("table").DataTable({});

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>    <table style="width:50%;">    <thead>      <tr>        <th>1</th>        <th>2</th>        <th>3</th>        <th>4</th>        <th>5</th>        <th>6</th>      </tr>    </thead>    <tbody>      <tr>        <td>1</td>        <td>2</td>        <td>3</td>        <td>4</td>        <td>5</td>        <td>6</td>      </tr>      <tr>        <td>1</td>        <td colspan="2">3 4</td>        <td colspan="3">4 5 6</td>      </tr>    </tbody>  </table>

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 1

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.