Not able to resolve Datatable SCRIPT5007: Unable t

Question

I am not be able to resolve following Datatables error:

SCRIPT5007: Unable to set property '_DT_CellIndex' of undefined or null reference

I tried to look all over the internet and found this to be the best solution. But I am still not able to resolve this issue. Am I missing something here? I am a newbie in JavaScript.

Answer 1

I fixed it. It was js part vs html.

Problem happened when I deleted html column and forgot to delete a js column that looked like this.

        {"name": "Product", "orderable": true,  "searchable": true},

Once I deleted the extra column in js everything started working.

Answer 2

found this answer here: datatable forums

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

did it work?

Answer 3

To solve the error:

Unable to set property '_DT_CellIndex' of undefined

First I tell you that $("id_tu_tabla").Datatable() have a minimum number of columns, it is 6. But if you have less than that, you have specify it, like with this code:

$('#table').DataTable({ columnDefs: [ { goals: [4]  }]  });  }

Answer 4

We had the same error, what fixed it for us is changing the (target) in the datatable initialization based on the number of columns starting from 0

In our table we had 4 columns so taget: [3]

$.extend($.fn.dataTable.defaults,{
  columnDefs: [{ 
    targets: [3]
  }]
});

Answer 5

It seems like many people got the error because of th and td mismatch. For me I got the error with what seemed to be a logical error. Look the code below.

Note: This was me experimenting with datatables in Angular 7, enhance things like *ngFor, ng-container, *ngIf, but never mind these, just look at the code structural difference (swapped tr with ng-container).

Table head:

<thead>
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Email</th>
    <th>Organisation</th>
  </tr>
</thead>

This produce the error:

<tr *ngFor="let user of users; let index = index">
  <ng-container *ngIf="showInactiveUsers">
    <td>{{user?.firstName}}</td>
    <td>{{user?.lastName}}</td>
    <td>{{user?.email}}</td>
    <td>{{user?.attributes?.organisation}}</td>
  </ng-container>
  <ng-container *ngIf="!showInactiveUsers && user?.enabled">
    <td>{{user?.firstName}}</td>
    <td>{{user?.lastName}}</td>
    <td>{{user?.email}}</td>
    <td>{{user?.attributes?.organisation}}</td>
  </ng-container>
</tr>

Rearranging the code like below solves the error:

<ng-container *ngFor="let user of users; let index = index">
  <tr *ngIf="showInactiveUsers">
    <td>{{user?.firstName}}</td>
    <td>{{user?.lastName}}</td>
    <td>{{user?.email}}</td>
    <td>{{user?.attributes?.organisation}}</td>
  </tr>
  <tr *ngIf="!showInactiveUsers && user?.enabled">
    <td>{{user?.firstName}}</td>
    <td>{{user?.lastName}}</td>
    <td>{{user?.email}}</td>
    <td>{{user?.attributes?.organisation}}</td>
    <td *ngIf="user?.enabled">
  </tr>
</ng-container> 

Answer 6

Check the count of your table column and dtColumnDefs. If you have 6 column then below will be your configuration for dtColumnDefs.

self.dtColumnDefs = [
                             DTColumnDefBuilder.newColumnDef(0),
                             DTColumnDefBuilder.newColumnDef(1),
                             DTColumnDefBuilder.newColumnDef(2),
                             DTColumnDefBuilder.newColumnDef(3),
                             DTColumnDefBuilder.newColumnDef(4),
                             DTColumnDefBuilder.newColumnDef(5)
                             ];