TypeError: $(...).DataTable is not a function

Question

我正在尝试为我的项目使用 jQuery 的 Datatable JS，来自 this link。

我从同一来源下载了完整的库。包中给出的所有示例似乎都可以正常工作，但是当我尝试将它们合并到我的 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 参考。渲染仍然不符合预期。没有CSS连JS都不行

我还在控制台中收到以下错误：

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

我还没有在这里绑定任何动态数据（比如在中继器内），但它仍然无法正常工作。

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

Answer 1

原因

此错误可能有多种原因。

jQuery DataTables 库丢失。
jQuery 库已加载在 jQuery DataTables.
已加载 jQuery 库的多个版本。

解决方案

仅包含版本的 jQuery 库版本 1.7 或更高版本 before jQuery DataTables。

例如：

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

有关此错误和其他常见控制台错误的详细信息，请参阅 jQuery DataTables: Common JavaScript console errors。

Answer 2

我收到这个错误是因为我发现我引用了 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

，也希望这对您有所帮助

Answer 3

该错误可能有两个原因：

第一

您在 jquery.js 之前加载 jQuery.DataTables.js 因此 :-

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

第二

您在同一页面上使用了 jQuery.js 的两个版本，因此 :-

尝试使用更高版本并确保两个链接具有相同版本的 jQuery

Answer 4

如果由于某些原因加载了 jQuery 的两个版本（不推荐），从第二个版本调用 $.noConflict(true) 将 return 全局范围的 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>

Answer 5

这是导出 table 插件完美运行所需的完整 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

的 table 上添加导出按钮

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

结果：-

Answer 6

这对我有用。但请确保在首选 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>

Answer 7

我知道晚了购买可以帮助某人

如果您不在 document.ready

中添加 $('#myTable').DataTable();，也会发生这种情况

所以不用这个

$('#myTable').DataTable();

试试这个

$(document).ready(function() {
    $('#myTable').DataTable();
});

Answer 8

老实说，修复这个问题花了好几个小时。最后只有一件事重新确认了 "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,
          });

        });

Answer 9

我运行也进这个错误。无论出于何种原因，我最初编码

var table = $('#myTable').DataTable({
    "paging": false,
    "order": [[ 4, "asc" ]]
});

这有时不会抛出错误，有时会抛出错误。通过将代码更改为

$('#myTable').DataTable({
    "paging": false,
    "order": [[ 4, "asc" ]]
});

错误似乎已经停止

Answer 10

在我的例子中，解决方案是从浏览器中删除 cookie。

Answer 11

在 Flask 中遇到同样的问题，我已经有一个加载 JQuery、Popper 和 Bootstrap 的模板。我正在将该模板扩展到我用作基础的其他模板来加载具有 table.

的页面

出于某种原因，在 Flask 中，显然外部模板中的文件在层次结构中上方 tables 中的文件（您正在扩展的文件）之前加载，因此 JQuery 在 JQuery 之前加载导致问题的 DataTables 文件。

我不得不创建另一个模板，我运行我在同一个地方导入了所有 JS CDN，这解决了这个问题。

Answer 12

在 Laravel 项目中使用数据表时发生同样的错误。即使尝试了以下解决方法，错误依旧：

确保包含 jQuery
在包含数据表之前包含 jQuery
确保只添加一个版本的 jQuery

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

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

Answer 13

有时，脚本（初始化数据table）会嵌入到通用页面模板中，因此如果其中一个页面实际上没有任何 table 而您没有为数据 table 导入 jquery 相关文件，你会遇到这个错误，因为一般初始化仍在寻找它。（这是我的情况）

解决方案：将数据table的初始化包装在一个条件中，在此之前检查库是否存在：

这是它的实际例子。

if (typeof jQuery.fn.DataTable != "undefined"){
    $('#accordionExample table').DataTable( {
        "pageLength": 5,
        "info": false,
        "order": [[ 1, "desc" ]]
    } );
}

Answer 14

我尝试了很多方法，但我的解决方案是在包含数据表的 html 脚本之后添加“延迟”。

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

Answer 15

我已将 defer 添加到数据 table jquery 库引用中。现在它对我有用。

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

Answer 16

如果你写的是Datatable而不是DataTable，也可能会出现这种情况。（DataTable T 必须大写）。这是初学者的错误。

$(document).ready(function() {
            $('#category-table').DataTable({
                // Your Code
            });

TypeError: $(...).DataTable is not a function