jQuery how to fix Cannot set property '_DT_CellIndex' of undefined?
From your code, I don't see the DataTabe initialization, usually placed inside the Document Ready function. So:
- Try to Initialize your table with an explicit configuration for each column ("visible:true" is a dummy setting that just confirms it is visible)
- Add the "datatable" class to your table html. Example:
Example:
$(document).ready(function () {
var myTable= $('#tablebqup').DataTable({
columns:[
//"dummy" configuration
{ visible: true }, //col 1
{ visible: true }, //col 2
{ visible: true }, //col 3
{ visible: true }, //col 4
{ visible: true }, //col 5
{ visible: true }, //col 6
{ visible: true }, //col 7
{ visible: true } //col 8
]
});
});
And on the html:
<table id="tablebqup" class="tableau table datatable table-fixed table-bordered table-dark table-hover ">
Explanation:
The "DataTable" initialization method should have the same number of columns on its configuration as the number of <th>
's/<td>
's on your html.
Wrong example:
//Javascript Code
var myTable= $('#myTableId').DataTable({
columns: [
//any column configuration
{ "bSearchable": false }, //col 1
{ "bSearchable": true }, //col 2
{ "bSearchable": true }, //col 3
{ "bSearchable": false }, //col 4
{ "bSearchable": false }, //col 5
{ "bSearchable": false } //col 6
]
});
And the html markup:
<table id="myTable" class="table datatable">
<thead>
<tr>
<th>col 1 header</th>
<th>col 2 header</th>
<th>col 3 header</th>
<th>col 4 header</th>
</tr>
</thead>
<tbody>
<tr>
<td> data col 1, row 1</td>
<td> data col 2, row 1</td>
<td> data col 3, row 1</td>
<td> data col 4, row 1</td>
</tr>
</tbody>
</table>
So even if the number of <td>
's and <tr>
's are matching on the html, having more columns configured on the DataTable method will cause this exception to be thrown. In this example, removing the configuration lines for col 5 and col 6 from the DataTable method would fix the error.
It gives me this error when the number of td
doesnt match the number of th
, or when I use colspan
...
Depending on your css, it could be hard to see. I'd add a border to the table while testing it out...
A simple mistake, the table header had a column " with no title, but the column did not exist in the table itself. I could not see it missing (because o no title and no borders).
Was helped by looking at the line in the datatable.js which gave the error - was implying a tr was at fault, so looked more carefully at my table and not my overall code