.datatable 不是 jquery 中的函数答案

【问题标题】：.datatable is not a function in jquery.datatable 不是 jquery 中的函数
【发布时间】：2020-06-25 10:17:56
【问题描述】：

以下是我将数据表属性应用于 HTML 表的 jquery 代码。我已包含以下 js。我在控制台中收到 .datatable 不是函数的错误。如果我用最新版本的 js 替换 jquery.min.js，我会得到同样的错误。它试图在 jquery 2.1.0 js 中找到 .datatable 函数，我已经包含了常见的布局文件。请告知。

  <script src="~/bootstrap-3.3.6-dist/js/jquery.min.js"></script>
  <script src="~/Scripts/jquery.dataTables.min.js"></script>
   <script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.js"></script>
   <script type="text/javascript">
   $(document).ready(function () {
    $("#dtTable").DataTable({
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        "pageLength": 5,
        "columns": []

    })
})

【问题讨论】：

<script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.js"></script> 的重复引用可能导致它。你试过删除这个吗？
你确定插件正在加载吗？尝试 F12 并查看您的来源以确保它在那里。
我不明白重复引用是什么意思？@ Jacob
好的，我试试@Nikkorian
好的，我理解@Jacob Hallgarth。是的，我尝试删除它，但它没有用。

标签： javascript html jquery asp.net-mvc datatables

【解决方案1】：

你的代码有很多问题。

1。复制 jQuery

您需要删除<script src="~/bootstrap-3.3.6-dist/js/jquery.min.js"></script>，因为您说您在通用布局页面中包含了 jQuery 2.1.0。

两次包含jQuery会带来很多麻烦。

2。重复的 DataTables 脚本

您需要删除<script src="~/Scripts/jquery.dataTables.min.js"></script>。

如果您打算使用缩小版，请将其以下<script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.js"></script> 更改为<script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.min.js"></script>。

3。渲染部分（）

我看到了你的asp.net mvc 标签。您需要确保在脚本占位符之前加载 jQuery 脚本：

<body>
    ...
    <script src="YOUR_JQUERY_PATH" />

    @Render.Section("scripts", required: false)
</body>

然后在您想要添加其他脚本的页面上，它们需要位于“脚本”部分：

@{  
    ViewBag.Title = "YOUR_INDIVIDUAL_PAGE";  
}

<!-- YOUR HTML ELEMENTS -->

@section scripts
{
    <script src="YOUR_BOOTSTRAP_SCRIPT_PATH" />
    <script src="YOUR_DATATABLES_SCRIPT_PATH />

    <script type="text/javascript">
        $(function() {
            // Your other jQuery logics
        });
    </script>
}

如果您打算在整个站点中使用 Bootstrap，我也会将 Bootstrap 脚本移动到布局中。

您也可以在 ASP.NET MVC 中使用捆绑和缩小：https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

【讨论】：

嘿@David Liang 非常感谢！它有效..抱歉由于某些原因无法更新您