TypeError:$(…)。DataTable不是函数

I am trying to work with jQuery's Datatable JS for my project from this link.

我正在尝试通过这个链接使用jQuery的Datatable JS处理我的项目。

I downloaded the complete library from the same source. All the examples given in the package seem to work fine, but when I try to incorporate them in my WebForms,the CSS,JS do not work at all.

我从同一来源下载了完整的库。包中给出的所有示例看起来都很好，但是当我尝试将它们合并到我的web表单中时，CSS、JS根本就不起作用。

Here is what I have done :

以下是我所做的:

<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>

My file structure for the JS and CSS in my Solution looks as follows :

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

TypeError:$(…)。DataTable不是函数

I have added all the necessary JS and CSS references as shown in the manual. Still the rendering isn't as expected. There is no CSS and even the JS doesn't work.

我添加了所有必要的JS和CSS引用，如手册所示。但是渲染并没有达到预期的效果。没有CSS，甚至JS也不工作。

Also in the console i get the following errors:

同样在控制台，我得到了以下错误:

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

I have still not bound any dynamic data here (like within a repeater or so) still it is not working.

我仍然没有绑定任何动态数据(比如在中继器中)，但它仍然没有工作。

Can someone please guide me in the right direction for this problem ?

有人能告诉我这个问题的正确方向吗?

6 个解决方案

#1

You need to load jQuery before you load any jQuery-related code such as jQuery DataTables, see below:

在加载任何与jQuery相关的代码(例如jQuery DataTables)之前，您需要加载jQuery:

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

Also, for production version it's recommended to load minified version (ending with .min.js instead).

此外，对于生产版本，建议加载迷你版本(以.min结尾)。js相反)。

See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.

参见jQuery DataTables:常见的JavaScript控制台错误，了解更多关于这个和其他常见控制台错误的信息。

#2

I got this error because I found out that I referenced jQuery twice.

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

The first time: on the master page (_Layout.cshtml) in ASP.NET MVC, and then again on one current page so I commented out the one on the master page.

第一次:在ASP中的master页面(_Layout.cshtml)上。NET MVC，然后在当前页面上，我注释掉了主页上的。

If you are using ASP.NET MVC this snippet could help you

如果您正在使用ASP。这段代码可以帮助您

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

and in the current page I added these lines

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

<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 -->

Hope this help you even if don't use ASP.NET MVC

希望这能帮助你即使不使用ASP。NET MVC

#3

This worked for me. But make sure to load the jquery.js before the preferred dataTable.js file. Cheers!

这为我工作。但是要确保加载jquery。在首选的dataTable之前。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>

#4

if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.

如果由于某些原因加载了两个jQuery版本(不推荐)，那么从第二个版本调用$. noconflict (true)将把全局范围的jQuery变量返回给第一个版本。

Some times it could be issue with older version (or not stable) of JQuery files

有时，旧版本(或不稳定)的JQuery文件可能会出现问题

Solution use $.noConflict();

解决方案使用$ .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>

#5

There can be two reasons for that error:

First

You are loding jQuery.DataTables.js before jquery.js so for that :-

你是lod jQuery.DataTables。js jquery之前。-

You need to load jQuery.js before you load jQuery.DataTables.js

需要加载jQuery。在加载jquery . datatabls .js之前

Second

You are using two versions of jQuery.js on the same page so for that :-

您使用的是两个版本的jQuery。在同一页上，因此:-

Try to use the higher version and make sure both links have same version of jQuery

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

#6

Here is the complete set of JS and CSS required for the export table plugin to work perfectly.

这里是导出表插件所需的完整的JS和CSS。

Hope it will save your time

希望它能节省你的时间

   <!--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 to add export buttons on the table with id = tbl

使用id = tbl在表上添加导出按钮的javascript

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

Result :-

结果:-

#1

You need to load jQuery before you load any jQuery-related code such as jQuery DataTables, see below:

在加载任何与jQuery相关的代码(例如jQuery DataTables)之前，您需要加载jQuery:

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

Also, for production version it's recommended to load minified version (ending with .min.js instead).

此外，对于生产版本，建议加载迷你版本(以.min结尾)。js相反)。

See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.

参见jQuery DataTables:常见的JavaScript控制台错误，了解更多关于这个和其他常见控制台错误的信息。

#2

I got this error because I found out that I referenced jQuery twice.

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

The first time: on the master page (_Layout.cshtml) in ASP.NET MVC, and then again on one current page so I commented out the one on the master page.

第一次:在ASP中的master页面(_Layout.cshtml)上。NET MVC，然后在当前页面上，我注释掉了主页上的。

If you are using ASP.NET MVC this snippet could help you

如果您正在使用ASP。这段代码可以帮助您

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

and in the current page I added these lines

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

<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 -->

Hope this help you even if don't use ASP.NET MVC

希望这能帮助你即使不使用ASP。NET MVC

#3

This worked for me. But make sure to load the jquery.js before the preferred dataTable.js file. Cheers!

这为我工作。但是要确保加载jquery。在首选的dataTable之前。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>

#4

如果由于某些原因加载了两个jQuery版本(不推荐)，那么从第二个版本调用$. noconflict (true)将把全局范围的jQuery变量返回给第一个版本。

Some times it could be issue with older version (or not stable) of JQuery files

有时，旧版本(或不稳定)的JQuery文件可能会出现问题

Solution use $.noConflict();

解决方案使用$ .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>

#5

There can be two reasons for that error:

First

You are loding jQuery.DataTables.js before jquery.js so for that :-

你是lod jQuery.DataTables。js jquery之前。-

You need to load jQuery.js before you load jQuery.DataTables.js

需要加载jQuery。在加载jquery . datatabls .js之前

Second

You are using two versions of jQuery.js on the same page so for that :-

您使用的是两个版本的jQuery。在同一页上，因此:-

Try to use the higher version and make sure both links have same version of jQuery

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

#6

Here is the complete set of JS and CSS required for the export table plugin to work perfectly.

这里是导出表插件所需的完整的JS和CSS。

Hope it will save your time

希望它能节省你的时间

   <!--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 to add export buttons on the table with id = tbl

使用id = tbl在表上添加导出按钮的javascript

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

Result :-

结果:-

秒客网

TypeError:$(…)。DataTable不是函数

6 个解决方案

#1

#2

#3

#4

#5

There can be two reasons for that error:

First

Second

#6

#1

#2

#3

#4

#5

There can be two reasons for that error:

First

Second

#6

相关文章