时间戳

首页 > 解决方案 > .datatable 不是 jquery 中的函数

javascript - .datatable 不是 jquery 中的函数

问题描述

下面是我将数据表属性应用于 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": []

    })
})

标签： javascripthtmljqueryasp.net-mvcdatatables

解决方案

你的代码有很多问题。

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

推荐阅读