Whenever I use <td colspan="x"></td>
, I get the following error:
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined(…)
$("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?
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.
Excellent solution provided by Dirk Bergstrom only works with HTML sourced data.
It is also possible to use the same idea with Ajax sourced data.
You need to use createdRow option to modify required cells when TR
element is created in table body.
For example:
var table = $('#example').DataTable({
ajax: 'https://api.myjson.com/bins/qgcu',
createdRow: function(row, data, dataIndex){
// If name is "Ashton Cox"
if(data[0] === 'Ashton Cox'){
// Add COLSPAN attribute
$('td:eq(1)', row).attr('colspan', 3);
// Hide required number of columns
// next to the cell with COLSPAN attribute
$('td:eq(2)', row).css('display', 'none');
$('td:eq(3)', row).css('display', 'none');
// Update cell data
this.api().cell($('td:eq(1)', row)).data('N/A');
}
}
});
See this example for code and demonstration.
See jQuery DataTables: COLSPAN in table body TBODY - Ajax data article for more details.
It is possible to emulate ROWSPAN
attribute using RowsGroup plug-in.
To use the plugin, you need to include JavaScript file dataTables.rowsGroup.js
and use rowsGroup
option to indicate indexes of the columns where you want grouping to be applied.
var table = $('#example').DataTable({
'rowsGroup': [2]
});
See this example for code and demonstration.
See jQuery DataTables: ROWSPAN in table body TBODY article for more details.
It is possible to group cells both vertically and horizontally simultaneously if we combine both workarounds described above.
See this example for code and demonstration.
See jQuery DataTables: COLSPAN in table body TBODY - COLSPAN and ROWSPAN article for more details.
Right now, datatables do not support rowspan or colspan to the table body.
But, the possible solution should be
DataTables hidden row details example
Hope it works.
If you are using scrollX
<thead>
<tr>
<th style="width: 20px;"></th>
<th>column H</td>
<th>column H</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Wide column</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr>
<td>123</td>
<td>Normal column</td>
<td>Normal column</td>
</tr>
</tbody>
Modified answer of #Dirk_Bergstrom
Simple solution is here.
<tr>
<td colspan="4">details</td>
<td style="display: none"></td>
<td style="display: none"></td>
<td style="display: none"></td>
</tr>
No other solution https://datatables.net/forums/discussion/33497/cannot-set-property-dt-cellindex-of-undefined
Refer below link.
Also refer the plugin here.
Hope this will help you
Because datatables doesn't support colspan
, I usually ended up with using unordered lists ( ul
) with list-style: none;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.