ASP.net MVC 中的 dataTables 捆绑问题答案

【问题标题】：dataTables bundling issue in ASP.net MVCASP.net MVC 中的 dataTables 捆绑问题
【发布时间】：2020-11-24 16:26:12
【问题描述】：

我在绑定 dataTables 库时遇到问题。这就是我现在得到的：

//other bundles (bootstrap etc.)

bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
           "~/Scripts/jquery.dataTables.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
           "~/Content/bootstrap.css",
           "~/Content/site.css",
           "~/Content/DataTables/css/dataTables.bootstrap.css",
           "~/Content/DataTables/css/jquery.dataTables.css"));

在_Layout.cshtml中：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="~/Content/fontawesome-all.min.css" rel="stylesheet" />

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<head>
...
</head>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/datatables")
@RenderSection("scripts", required: false)

不幸的是它不起作用，表没有被修改。另一个问题是，当我按 F12 检查我的网站时，我没有看到最后附有 Scripts/datatables，只有这个：

<script src="/Scripts/jquery-3.5.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>

另外我可以看到错误：Uncaught TypeError: $(...).DataTable is not a function 在 HTMLDocument....

我的 JS 看起来像这样：

$('document').ready(function () {
    $('#myTable').DataTable({
        "order": [[3, "desc"]]
    });
});

【问题讨论】：

标签： c# jquery asp.net-mvc

【解决方案1】：

您的/Scripts/jquery.dataTables.js 文件似乎没有加载。这就是您在控制台上看到错误的原因。

您可以尝试使用<script src="/Scripts/jquery.dataTables.js"></script> 引用而不是现有的@Scripts.Render("~/bundles/datatables") 加载数据表库吗？

您似乎还加载了两次 jquery 库！？

【讨论】：

我试过这个但没有成功。我先加载js，再加载dataTables.js，不行