javascript - 在 Razor 视图中使用 DataTables 插件 - 无法设置未定义的属性(设置“_DT_CellIndex”)错误
问题描述
我正在使用一个 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>
解决方案
你的问题是数量不匹配<td> </td>
。您只是<td>
在foreach
循环中渲染 1,但<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> ```
推荐阅读
- dart - 如何从流中获取文章对象
- >>
- wpf - ModernUI 框架支持哪些版本的 .NET 和 WPF?
- heroku - gpg --在 Heroku 上导入
- python-3.x - 函数将迭代目标读取为本地参数字符串,而不是 for 循环中的迭代值
- excel - 如何使用 UsedRange.Find(What:=, LookAt:=) 在单元格中搜索多个子字符串
- fingerprint - Vkontakte sdk_fingerprint 仅在随机设备上不正确
- unity3d - 如何在 Unity fom Vuforia 中动态加载数据集?
- javascript - 如何调试对 Node.js Express 应用程序的 POST 请求?
- google-apps-script - 如何使用 Google Apps 脚本或 API 判断 Google 幻灯片中的幻灯片是否“跳过”?
- javascript - 我应该如何创建类似于 Venmo 的应用演示?