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

时间：2015-07-05 06:49:20

标签： javascript jquery css asp.net datatables

我正在尝试使用jQuery的Datatable JS从this链接开始我的项目。

我从同一个源下载了完整的库。包中给出的所有示例似乎都运行正常，但是当我尝试将它们合并到我的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的文件结构如下所示：

File structure of JS and CSS in solution

我已经添加了所有必要的JS和CSS引用，如手册中所示。渲染仍然不如预期。没有CSS，甚至JS都不起作用。

同样在控制台中，我收到以下错误：

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

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

有人可以指导我正确指导这个问题吗？

14 个答案:

答案 0 :(得分：70)

你需要在之前加载jQuery ，你加载任何与jQuery相关的代码，例如jQuery DataTables，见下文：

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

此外，对于生产版本，建议加载缩小版本（以.min.js结尾）。

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

答案 1 :(得分：25)

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

答案 2 :(得分：24)

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

答案 3 :(得分：11)

如果某些原因加载了两个版本的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>

答案 4 :(得分：6)

以下是导出表插件完美运行所需的完整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'
                        ]
                    });

结果： -

enter image description here

答案 5 :(得分：4)

该错误可能有两个原因：

的第一

您在jQuery.DataTables.js之前忘记了jquery.js，所以： -

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

的第二

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

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

答案 6 :(得分：2)

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

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

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

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

答案 7 :(得分：1)

我也遇到了这个错误。不管出于什么原因，我最初都是

eval

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

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

错误似乎已停止

答案 8 :(得分：0)

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

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

，也会发生这种情况

所以代替这个

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

尝试一下

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

答案 9 :(得分：0)

老实说，花了几个小时才能解决此问题。最终，只有一件事可以肯定“ 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,
          });

        });

答案 10 :(得分：0)

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

答案 11 :(得分：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">

答案 12 :(得分：0)

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

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

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

答案 13 :(得分：0)

有时会发生脚本（初始化datatable）嵌入在通用页面模板中的情况，因此如果其中一个页面实际上没有任何表并且您没有为datatable导入jquery相关文件，您将面临这种情况错误，因为一般初始化仍在寻找那个。 （这是我的情况）

解决方案：是将数据表的初始化包装在一个代码中，在此之前检查库的存在：

这是一个实际例子。

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