为 MVC 中的 DataTables 从视图中的布局加载不同的 jQuery 库

Question

我需要在我将使用 DataTables 库的视图中加载特定的 jQuery 库版本。

问题是我对所有项目都使用 jQuery 3.1，并且我在 _Layout 视图中包含了引用，但 DataTables 只允许：

Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3

如果可能，我如何在该特定视图中加载不同版本的 jQuery？

编辑：

关于 DavidG 的评论，似乎该消息是基于不支持 jQuery v3 的 Bootstrap jQuery 支持库。

我将更新到 Bootstrap 3.3.7 以避免这个问题（“添加对 jQuery 3 的支持”）并使用 jQuery 3.1.0，但 DataTables 问题仍然存在。

EDIT2（解决方案）：

我决定按照 Shyju 的建议保持一切简单并基于一个稳定的 jQuery 版本，因此我将 jQuery 降级到 2.2.4（最后一个 v2 稳定版本），并将 Bootstrap 保留到最后一个版本（v3.3.7 )。

DataTables 版本保持不变 (1.10.12)。

Answer 1

如果您绝对需要为特定页面加载不同版本的库，您可以这样做。

在返回有数据表的视图的具体action方法中，设置一个ViewBag项

public ActionResult List()
{
    ViewBag.NeedsSpecialJQuery = true;
    return View();
}

在 Layout(_Layout.cshtml) 中，检查这个 viewbag 项并根据它的存在/值，有条件地加载您需要的 jQuery 版本。

@{
    if (ViewBag.NeedsSpecialJQuery != null && ViewBag.NeedsSpecialJQuery )
    {
        <script src="path to jQuery 1.9.1 here"></script>
    }
    else
    {
        <script src="path to other jQuery here"></script>
    }
}

虽然这可能会解决您当前的问题，但我强烈建议您考虑更新您的 jQuery 版本（以及其他依赖于 jQuery 的库），以便您只需要一个版本。这可能是一点工作。但这是值得的。你不需要寻找这样的解决方法

另一种选择是为特定视图使用单独的布局文件

Answer 2

使用jQuery.noConflict() 可以实现此目的。

• 加载旧的 jQuery 库。
• 将其全局引用更改为$ 以外的其他内容。例如jQuery2
• 加载新的 jQuery 库

您可以继续为新库使用$ 处理程序，并且可以调用您提供的名称，例如jQuery2，只要你想用旧的

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script type="text/javascript">
    var jQuery2 = $.noConflict(true);
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

如果您只想在特定页面中安装旧的 jQuery 库，您可以将此答案与Shyju's Solution 结合，您可以在他们的 ViewBag 中设置一个布尔值并像这样使用它。

@{
    if (ViewBag.NeedsSpecialJQuery != null && ViewBag.NeedsSpecialJQuery)
    {
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
        <script type="text/javascript">
            var jQuery2 = $.noConflict(true);
        </script>
    }

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
}

那你可以拨打DataTablelike

jQuery2("#datatable").DataTable();

Working jsFiddle