d我正在使用 DataTables.js在我的网络 MVC 应用程序上。 这是我的链接:
<link href="@Url.Content("~/Content/datatables/jquery.dataTables.css")" rel="stylesheet" type="text/css" />
@Scripts.Render("~/bundles/jquery");
<script type=" text/javascript" src="@Url.Content("/Scripts/datatables/jquery.dataTables.min.js")"></script>
<script type="text/javascript" src="@Url.Content("/Scripts/datatables/tables/table.js")"></script>
我无法理解,但我的 jQuery 库加载了两次(我捕获了断点 2 次),jquery.dataTables.min.js - 未加载。 然后我在浏览器中检查了源 - 一切正确 - js 文件就位。
当我试图显示我的网格时我收到错误消息:
var dataSet = [
['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'],
['Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'],
['Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'],
['Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'],
['Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A']
];
$(document).ready(function () {
$('#customTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
$('#example').dataTable({
"data": dataSet,
"columns": [
{ "title": "Engine" },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "class": "center" },
{ "title": "Grade", "class": "center" }
]
});
});
未捕获的类型错误:$(...).DataTable 不是函数
PS:我的绑定(bind)脚本:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
我的错误在哪里?
最佳答案
你的 datatables
js 和 css 文件应该放在一个包中供初学者使用:
bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
"~/Scripts/datatables/jquery.dataTables.min.js"));
像这样将 datatables
js 包添加到您的页面:
@section Scripts {
@Scripts.Render("~/bundles/datatables")
}
为什么要动态添加表格?最好将它添加到 View 中,以便它在加载 js 之前位于 DOM 中:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>
这是您在 jsFiddle 上的代码的工作示例
关于javascript - DataTables.js 未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30187651/