在 Razor 视图中使用 DataTables 插件 - 无法设置未定义的属性（设置“_DT_CellIndex”）错误
Posted
技术标签:
【中文标题】在 Razor 视图中使用 DataTables 插件 - 无法设置未定义的属性（设置“_DT_CellIndex”）错误【英文标题】：Using DataTables Plugin in Razor View - Cannot set properties of undefined (setting '_DT_CellIndex') Error 【发布时间】：2021-11-15 07:10:52 【问题描述】：我正在使用一个 asp.net mvc 网络应用程序。我创建了一个表，现在我想使用datatables 中的插件。我看到你只需要 3 行代码就可以完成这项工作。我试图完全按照它的要求来工作并给我所需的数据表，但它没有给我我期望的表格。我什至去了示例 -> html (DOM) 源数据 -> 在 javascript 选项卡下我输入了所需的行。
我在此处使用脚本标签做错了什么还是插件无法正常工作？我没有下载文件并将其导入到我的项目中。
期待一个像这样的标准外观
但是我得到了这个......所以我错过了数据表插件的外观和以下错误。
无法设置未定义的属性（设置'_DT_CellIndex'）
我的看法：
@model List<Fright>
@
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function ()
$('#homeTable').DataTable();
);
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
@foreach (var item in result)
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=@url>@item.Key</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
【问题讨论】：
您是否在开发者控制台中看到任何错误？ (F12) @Steve 我刚刚检查并看到我收到了一个错误。我把它贴在了帖子上。不知道为什么说 .DataTable 不是一个函数，但在指南中它显示它是这样的。我做错了吗？ 我通常将所有内容放在文件末尾的 @section Scripts 中。不确定它是否有任何区别。 也不应该是_<script src="https://cdn.datatables.net..._
那么从头中取出所有内容（脚本）并将其放在</html> 行之后？关于<script src="cdn.datables.net..，我也这么认为，但是如果你在他们的网站上查看页面左侧的datatables.net，它会说复制这个，它包括两个正斜杠@Steve
【参考方案1】：
您的问题是<td> </td> 的数量不匹配。您只是在 foreach 循环中渲染 1 个 <td>，但表头中有两个 <th></th>
@model List<Fright>
@
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function ()
$('#homeTable').DataTable();
);
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
@foreach (var item in result)
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=@url>@item.Key</a>
</td>
<td>
<a href=@url>@item.Option</a> /* output you Option value*/
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> ```
【讨论】：
我明白了！谢谢！所以在使用他们的插件时，以上是关于在 Razor 视图中使用 DataTables 插件 - 无法设置未定义的属性（设置“_DT_CellIndex”）错误的主要内容，如果未能解决你的问题，请参考以下文章
覆盖 asp.net core razor 页面中的 razor 视图
在 razor 页面中使用 javascript 更新部分视图