Javascript 无法解析数据表 SCRIPT5007：无法设置未定义或空引用的属性“_DT_CellIndex”

Not able to resolve Datatable SCRIPT5007: Unable to set property '_DT_CellIndex' of undefined or null reference

提问by Frank D.

I am not be able to resolve following Datatables error:

我无法解决以下数据表错误：

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

SCRIPT5007：无法设置未定义或空引用的属性“_DT_CellIndex”

I tried to look all over the internet and found thisto 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.

我试图查看整个互联网，发现这是最好的解决方案。但我仍然无法解决这个问题。我在这里错过了什么吗？我是 JavaScript 的新手。

回答by Ravi Mane

Basically this issue came out because of miss matching count of th to td. be sure for number of th matches to td. hope this will help you.

基本上这个问题是因为 th 到 td 的匹配计数不匹配而出现的。确保与 td 匹配的次数。希望这会帮助你。

回答by Rozh Ali

We had the same error! What fixed it for us was changing the targetin the dataTableinitialization based on the number of columns starting from 0.

我们有同样的错误！什么固定它对于我们来说是改变target在dataTable基于列的从0开始的数初始化。

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

在我们的表中，我们有 4 列，所以 targets: [3]

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

回答by Junaid

In my case, using colspan in a row, the number of cells didn't match the table headers so this error shows. you can add these hidden cells to get rid of that error.

就我而言，连续使用 colspan 时，单元格数量与表格标题不匹配，因此会显示此错误。您可以添加这些隐藏的单元格以消除该错误。

try this

尝试这个

<tr>
    <td colspan="4">details</td>
    <td style="display: none"></td>
    <td style="display: none"></td>
    <td style="display: none"></td>
</tr>

add the required cells but hide them

添加所需的单元格但隐藏它们

回答by Ahmedhassanein

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?

它起作用了吗？

回答by sumit_suthar

Check the count of your table column and dtColumnDefs.

检查表列的计数和dtColumnDefs。

If you have 6 columns then below will be your configuration for dtColumnDefs.

如果您有 6 列，那么下面将是您的dtColumnDefs.

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

回答by Yevgeniy Afanasyev

I fixed it. It was jspart vs html.

我修好了它。这是js部分与html。

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

当我删除 html 列并忘记删除看起来像这样的 js 列时，问题发生了。

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

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

一旦我删除了 js 中的额外列，一切就开始工作了。

回答by Yerry Aguirre

To solve the error:

要解决错误：

Unable to set property '_DT_CellIndex' of undefined

无法设置未定义的属性“_DT_CellIndex”

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:

首先我告诉你$("id_tu_tabla").Datatable()有最少的列数，它是 6。但是如果你少于这个数，你必须指定它，就像下面的代码：

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

回答by Itumeleng Edison Modise

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.

似乎很多人因为 th 和 td 不匹配而得到错误。对我来说，我得到的错误似乎是一个逻辑错误。看看下面的代码。

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 trwith ng-container).

注：这是我的数据表中的实验角7，加强东西像* ngFor，NG-容器，* ngIf，但从来没有介意这些，只是看看代码结构上的差异（交换tr用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> 

回答by Zia Qammar

If you requirement is to show the row with "No record found" message like below code

如果您需要显示带有“未找到记录”消息的行，如下面的代码

@if(Model.Count==0)
    {
        <tr>
            <td colspan="3">
                No record found.
            </td>
        </tr>
    }

then just simple remove this condition because datatable itself append "No data available in table" message, in my case it's resolve the my error

然后只需简单地删除此条件，因为数据表本身会附加“表中无可用数据”消息，在我的情况下，它解决了我的错误

回答by Yoosaf Abdulla

I had a similar issue and it was fixed by removing the '$' sign which was among the column name. Hope this helps.

我有一个类似的问题，它是通过删除列名中的“$”符号来解决的。希望这可以帮助。