TypeError：$（…）.DataTable不是函数

90

我正在尝试通过此链接为我的项目使用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

我仍然没有在这里绑定任何动态数据（例如在转发器之内），但仍然无法正常工作。

有人可以指导我解决这个问题的正确方向吗？

javascript  jquery  css  asp.net  datatables 
— 阿比舍克·戈什（Abhishek Ghosh）
source
无论我写的是什么代码都很好，但是我也遇到了同样的错误。经过长时间的分析，由于最近7天没有重启，所以我只是重新启动了PC。然后，我的代码开始工作。
— Ashok kumar，
@Ashokkumar：也许你很幸运！
— Abhishek Ghosh

Answers:

130

原因

此错误可能有多种原因。

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

解

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

例如：

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

有关此错误和其他常见控制台错误的更多信息，请参见jQuery DataTables：常见JavaScript控制台错误。

— Gyrocode.com
source
45

这对我有用。但是请确保在首选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>
— 伊乔维尔
source
8
该方法中的$ .noConflict（）调用对我来说很关键。谢谢。
— jrebs
36

我收到此错误，是因为我发现我两次引用了jQuery。

第一次：_Layout.cshtml在ASP.NET MVC的主页（）上，然后在当前页面上再次访问，因此我在主页上将其注释掉。

如果您使用的是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
source
实际上，我在_Layout.cshtml中评论了jquery.min.js。但是，对我真正有效的方法是在所有<scripts> </ scripts>元素之后的最底部放置@RenderSection（“ scripts”，required：false）。
— 穆罕默德·泰亚卜（Mohammad tayyab），
非常感谢，您的答案在安装和重新安装jquery数据表的4个小时内结束了！不过，我有一个问题：如果我在_Layout.cshtml中需要jQuery并在myView.cshtml中需要数据表，该怎么办，因为在myView.cshtml中不提及jQuery会导致“未定义jQuery”吗？
— Hamza Dahmoun
19

如果由于某种原因加载了两个版本的jQuery（不建议这样做），$.noConflict(true)则从第二个版本进行调用将使全局范围内的jQuery变量返回第一个版本的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）
source
使用带有laravel的jQuery和Blade作为我的模板引擎...令人惊讶的是，这是它对我有用的唯一方法-当然，您知道开发人员...当它起作用时，您将停止搜索！
— 丹尼尔·沃瑞
noConflict（）为我工作。我想我安装了其他版本的jQuery。
— 亚伦
10

这是导出表插件正常工作所需的全套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
source
我能够在没有“导出表按钮”脚本调用的情况下执行此操作。好东西。
— 马克
7

该错误可能有两个原因：

第一

您为此jQuery.DataTables.js之前很喜欢jquery.js：-

您需要先加载，jQuery.js然后再加载jQuery.DataTables.js

第二

您jQuery.js在同一页面上使用的是两个版本：

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

— Tenstormavi
source
实现“ TypeError：$（…）.DataTable不是一个函数”的潜在问题是，因为Datatables开始提供一个自行选择的下载构建器，是您在下载中选择了jquery，但已经在页面上包含了它。
— 战胜了袋熊
只是要清楚-其他来源也会引发此错误。我按正确的顺序排列了它们，没有使用两个jQuery。以防万一有其他可怜的人来了...。当它工作时，DataTables很棒，但是我喜欢这种方式（大约一个小时可以使另一个******安装工作！）
— BeNice
2

老实说，要花几个小时才能解决这个问题。最终，只有一件事可以肯定“ Basheer AL-MOMANI”提供的解决方案。这只是发表声明

   @RenderSection("scripts", required: false)

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

 $.noConflict();

在jQuery函数内，在另一个* .cshtml文件处调用为：

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

        });
— 穆罕默德·泰亚卜
source
1

我也遇到了这个错误。无论出于什么原因，我最初编写代码

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

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

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

错误似乎已停止

— 迈克·沃尔玛
source
0

我知道后期购买可以帮助某人

如果您不添加$('#myTable').DataTable();内部document.ready

所以代替这个

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

试试这个

$(document).ready(function() {
    $('#myTable').DataTable();
});
— 技术Yogesh
source
0

就我而言，解决方案是从浏览器中删除Cookie。

— 阿加思
source
0 
// you can get the Jquery's librairies online with adding  those two rows in your page

 <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
— 卡梅尔·恩凯什（Carmel Nkesh）
source
0

在Flask中有同样的问题，我已经有一个模板可以加载JQuery，Popper和Bootstrap。我正在将该模板扩展为我用来作为加载具有该表的页面的基础的其他模板。

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

我必须创建另一个模板，以便在同一位置运行所有导入的JS CDN，从而解决了该问题。

— 丹尼尔·赫雷拉
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.