ASP.NET (...) 中的 JQuery 数据表。DataTables 不是函数
Posted
技术标签:
【中文标题】ASP.NET (...) 中的 JQuery 数据表。DataTables 不是函数【英文标题】：JQuery Datatables in ASP.NET (...).DataTables is not a function 【发布时间】：2020-06-29 07:16:29 【问题描述】：我想在我的 cshtml 文件中使用 JQuery 数据表，但出现错误：$(...).DataTable 不是函数。
这就是我的工作：
@model IEnumerable<VannNettAdmin.Models.Classification.blabla>
@
ViewData["Title"] = "Index";
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script type="text/javascript">
$(document).ready( function ()
$('#test').DataTable();
);
</script>
</head>
<body>
<h2>Index</h2>
<table id="test" class="table table-bordered table-striped cf">
<thead class="cf">
<tr>
<th>
@Html.DisplayNameFor(model => model.blabla)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
<tr>
<td>
@Html.DisplayFor(modelItem => item.blabla)
</td>
</tr>
</tbody>
我的布局文件： https://paste.ubuntu.com/p/Kvm3n2VXx7/
【问题讨论】：
你会发布你的完整视图代码吗？我无法确定您使用的是布局还是脚本渲染部分 看起来您正在使用 MVC - MVC 在页面底部的捆绑包中包含 jquery - 但您也将它包含在<head> 中 - 即您正在加载它两次。第二次加载有效地卸载了数据表。
【参考方案1】：
<script type="text/javascript">
$(document).ready( function ()
$('#test').DataTable();
);
</script>
从 head 标签中删除你的脚本，并在结束 body 标签之前添加它。 此外，请确保 jQuery 没有在页面上加载两次或更多次。
【讨论】：
【参考方案2】：在您的布局文件中，您已经有一个 head 标签和 body 标签，不建议重复这些元素。您还必须利用 @rendersection 脚本将脚本文件从视图添加到布局。请按照以下步骤操作；
-
在你的布局文件的head标签末尾添加这个
@RenderSection("styles", required: false)
-
从视图文件中删除 body、head 标签。
从您的视图文件中删除 JQUERY，不要重复，它们可能具有冲突的功能。
使用
@section scripts ... 和@section styles ... 将视图文件放置在布局文件中的特定位置。
这应该是您生成的视图文件。
@model IEnumerable<VannNettAdmin.Models.Classification.blabla>
@ Layout = "_LayoutFileName";
@
ViewData["Title"] = "Index";
<h2>Index</h2>
<table id="test" class="table table-bordered table-striped cf">
<thead class="cf">
<tr>
<th>
@Html.DisplayNameFor(model => model.blabla)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
<tr>
<td>
@Html.DisplayFor(modelItem => item.blabla)
</td>
</tr>
</tbody>
</table>
@section styles
<link href="http://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
@section scripts
<script src="http://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
$(document).ready( function ()
$('#test').DataTable();
);
</script>
未定义错误的mData是由th和td的数量不相等引起的。
所以如果你添加了td，你也应该添加一个对应的th；如果您有 2 个td，则要求您也有 2 个th。
<table id="test" class="table table-bordered table-striped cf">
<thead class="cf">
<tr>
<th>
@Html.DisplayNameFor(model => model.blabla)
</th>
<th>
Options
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
<tr>
<td>
@Html.DisplayFor(modelItem => item.blabla)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new climatezoneId = item.ClimateZoneId)
</td>
</tr>
</tbody>
</table>
【讨论】：
评论不用于扩展讨论；这个对话是moved to chat。以上是关于ASP.NET (...) 中的 JQuery 数据表。DataTables 不是函数的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET MVC 中的 jQuery 与 MicrosoftAjax
ASP.NET (...) 中的 JQuery 数据表。DataTables 不是函数
jQuery hide 不隐藏 vb.net/asp.net webform 中的任何内容