jQuery how to fix Cannot set property '_DT_CellIndex' of undefined? jQuery how to fix Cannot set property '_DT_CellIndex' of undefined? ajax ajax

jQuery how to fix Cannot set property '_DT_CellIndex' of undefined?


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


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.