Razor视图使用DataTables插件报Cannot set properties of undefined错误

问题根因 #

你遇到的Cannot set properties of undefined (setting '_DT_CellIndex')报错、样式异常的核心原因是表格表头列数与表体每行的单元格数量不匹配，这是DataTables初始化时最常见的报错原因之一。

你的表格<thead>中定义了2个表头列：Value和Option，但循环渲染<tbody>的行时，每个<tr>内只写了1个<td>元素，DataTables初始化时需要给每个单元格绑定索引属性，找不到对应第二列的单元格就会抛出该错误，同时样式渲染也会错乱。

修复方案 #

二选一即可：

• 方案1：保留Option表头，补全表体每行的第二列单元格，暂时无内容可以用空td占位，修改后的tbody代码如下：

<tbody>
    @foreach (var item in result)
    {
        var url = "/frightSummary/SummaryIndex?id=" + item.Key;
        <tr>
            <td>
                <a href=@url>@item.Key</a>
            </td>
            <!-- 补全和表头对应的第二列单元格 -->
            <td></td>
        </tr>
    }
</tbody>

• 方案2：不需要Option列的话，直接删除<thead>中对应的<th>Option</th>，保证表头<th>的数量和每行<td>的数量完全一致即可。

额外注意 #

你引入DataTables JS时加了defer属性，如果你修改列数后仍然没有生效，可以去掉defer属性再测试，不过该属性不是本次问题的核心诱因。

内容的提问来源于stack exchange，提问作者MarkCo