类型错误：$(...).DataTable不是一个函数。

Question

类型错误：$(...).DataTable不是一个函数。

142

我正在尝试在我的项目中使用jQuery的Datatable JS，下载链接为这里。

我从同一来源下载了完整的库。包中提供的所有示例似乎都能正常工作，但当我尝试将它们合并到我的WebForms中时，CSS和JS根本无法工作。

以下是我做的：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="myTable" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
               <!-- table body -->
            </tbody>
        </table>
    </div>
    <script src="js/jquery.dataTables.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>
    </form>
</body>
</html>

我的解决方案中JS和CSS的文件结构如下：

JS和CSS在解决方案中的文件结构

我已按照手册添加了所有必要的JS和CSS引用。但是渲染效果并不如预期。没有CSS，甚至连JS也无法正常工作。

同时，在控制台中我收到以下错误信息：

ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function

我在这里仍然没有绑定任何动态数据（例如在重复器内），但它仍然无法工作。

请问有人可以指导我解决这个问题吗？

- Abhishek Ghosh

无论我写的代码有多完美，但我还是遇到了同样的错误。经过长时间的分析，我决定重启我的电脑，因为我已经有7天没有重启了。然后，我的代码开始正常工作了。 - Ashok kumar

@Ashokkumar：你可能有点运气好！ - Abhishek Ghosh

18个回答

76

这对我有用。但请确保在首选的dataTable.js文件之前加载jquery.js。干杯！

<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/data-table/jquery.dataTables.js"></script>

 <script>$(document).ready(function () {
    $.noConflict();
    var table = $('# your selector').DataTable();
});</script>

- Ichorville

22

$.noConflict() 方法中的调用是关键所在，谢谢。 - jrebs

@jrebs 谢谢你的建议！我曾经为此苦恼不已，而noConflict是让它正常工作的关键！！ - undefined

45

我得到了这个错误，因为我发现我引用了两次jQuery。

第一次是在ASP.NET MVC的主页面（_Layout.cshtml）上，然后在当前页面又引用了一次，所以我注释掉了主页面上的那个。

如果你正在使用ASP.NET MVC，这段代码可能会对你有帮助。

@*@Scripts.Render("~/bundles/jquery")*@//comment this line 
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

而在当前页面，我添加了这些行

<script src="~/scripts/jquery-1.10.2.js"></script>

<!-- #region datatables files -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- #endregion -->

希望这能对你有所帮助，即使你没有使用ASP.NET MVC。

- Basheer AL-MOMANI

实际上，我在_Layout.cshtml中注释了jquery.min.js。然而，对我真正起作用的是在所有<script></script>元素之后的底部放置@RenderSection("scripts", required: false)。 - muhammad tayyab

非常感谢，您的答案结束了4个小时的安装和重新安装jQuery datatables！不过我有一个问题：如果我需要在_Layout.cshtml中使用jQuery，并且需要在myView.cshtml中使用datatables，由于在myView.cshtml中没有提到jQuery会导致“未定义jQuery”，那我该怎么办？ - Hamza Dahmoun

23

如果因为某些原因加载了两个版本的jQuery（这不被推荐），从第二个版本调用$.noConflict(true)将会把全局作用域中的jQuery变量恢复为第一个版本的变量。

有时可能会出现旧版本（或不稳定）的jQuery文件的问题。

解决方案是使用$.noConflict();

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
    $('#myTable').DataTable();
});
// Code that uses other library's $ can follow here.
</script>

- Manoj Patil

16

这里是导出表格插件完整工作所需的JS和CSS集合。

希望它能节省你的时间。

   <!--Import jQuery before export.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


    <!--Data Table-->
    <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"  src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>

    <!--Export table buttons-->
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
    <script type="text/javascript"  src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>

<!--Export table button CSS-->

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">

使用JavaScript在ID为tbl的表格上添加导出按钮。

  $('#tbl').DataTable({
                        dom: 'Bfrtip',
                        buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                        ]
                    });

结果：

- Hitesh Sahu

我能够在没有“导出表格按钮”脚本调用的情况下完成这个。很不错。 - Mark

14

在 Laravel 项目中使用 DataTables 时会出现同样的错误。即使尝试了以下解决方案，错误仍然存在：

确保已经包含了 jQuery
在包含 DataTables 之前包含 jQuery
确保只添加了一个版本的 jQuery

为了消除错误，在确保满足上述条件后，将“defer”添加到包含 DataTables 的标签中。例如：

<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" defer></script>

- Atif Bashir

1

这似乎是正常工作的。 - Kesavan Muthuvel

10

这个错误可能有两个原因：

第一个原因

你在加载 jQuery.DataTables.js 之前加载了 jquery.js ，因此会出现以下问题：

你需要在加载 jQuery.DataTables.js 前先加载 jQuery.js

第二个原因

你在同一页中使用了两个版本的 jQuery.js，因此会出现以下问题：

尝试使用更高版本的 jQuery.js，并确保两个链接使用相同版本的jQuery

- tenstormavi

一个可能出现的问题是，由于Datatables开始提供自定义下载构建器，您在下载中选择了jquery，但是您的页面上已经有了它，因此会出现“TypeError: $(…).DataTable is not a function”的错误。 - Vanquished Wombat

只是为了明确 - 这个错误也会从其他来源抛出。我已经按照正确的顺序排列它们，并且没有使用两个jQuery。以防其他可怜的灵魂出现....当它工作时，DataTables非常棒，但对于我来说太不稳定了（大约花了一个小时才能让另一个该死的安装程序工作！） - BeNice

5

我尝试了很多方法，但我的解决方案是在引入datatables的HTML脚本后添加"defer"。

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js" defer></script>

- İ. Burak Tanrıkulu

4

老实说，这个问题花了好几个小时才解决。最终只有一个方法有效，就是确认了"Basheer AL-MOMANI"提供的解决方案，即插入语句。

   @RenderSection("scripts", required: false)

在_Layout.cshtml文件中，在所有<script></script>元素之后，并在同一文件中添加注释jquery脚本。其次，我不得不添加。

 $.noConflict();

在另一个 *.cshtml 文件中，通过 jQuery 函数调用：

 $(document).readyfunction () {
          $.noConflict();
          $("#example1").DataTable();
         $('#example2').DataTable({
              "paging": true,
              "lengthChange": false,
              "searching": false,
              "ordering": true,
              "info": true,
              "autoWidth": false,
          });

        });

- muhammad tayyab

3

我已经在数据表格jquery库引用中添加了defer。现在它对我起作用了。

<script src="~/Scripts/jquery.dataTables.min.js" defer></script>

- Anshu Verma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gyrocode.com · Accepted Answer

原因

出现此错误可能有多种原因。

缺少jQuery DataTables库。
加载了jQuery DataTables之后再加载jQuery库。
加载了多个版本的jQuery库。

解决方案

在jQuery DataTables之前只包含一个版本1.7或更新版本的jQuery库。

例如：

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>

请参阅jQuery DataTables：常见JavaScript控制台错误以获取更多关于此错误和其他常见控制台错误的信息。