Javascript TypeError: $(...).DataTable 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31227844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: $(...).DataTable is not a function
提问by Abhishek Ghosh
I am trying to work with jQuery's Datatable JS for my project from thislink.
我正在尝试通过此链接为我的项目使用 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.
我从同一来源下载了完整的库。包中给出的所有示例似乎都可以正常工作，但是当我尝试将它们合并到我WebForms的 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 的文件结构如下所示：
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 ?
有人可以指导我朝着正确的方向解决这个问题吗？
回答by Gyrocode.com
CAUSE
原因
There could be multiple reasons for this error.
此错误可能有多种原因。
- jQuery DataTables library is missing.
- jQuery library is loaded afterjQuery DataTables.
- Multiple versions of jQuery library is loaded.
- 缺少 jQuery DataTables 库。
- jQuery 库在jQuery DataTables之后加载。
- 加载了多个版本的 jQuery 库。
SOLUTION
解决方案
Include only oneversion of jQuery library version 1.7 or newer beforejQuery DataTables.
在jQuery DataTables之前只包含一个jQuery 库版本 1.7 或更高版本。
For example:
例如：
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
See jQuery DataTables: Common JavaScript console errorsfor more information on this and other common console errors.
有关此错误和其他常见控制台错误的更多信息，请参阅jQuery 数据表：常见 JavaScript控制台错误。
回答by Ichorville
This worked for me. But make sure to load the jquery.js before the preferred dataTable.js file. Cheers!
这对我有用。但请确保在首选 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>
回答by Basheer AL-MOMANI
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.
第一次：_Layout.cshtml在 ASP.NET MVC的母版页 ( ) 上，然后再次在当前页面上，所以我注释掉了母版页上的那个。
If you are using ASP.NET MVC this snippet could help you
如果您使用的是 ASP.NET MVC，此代码段可以帮助您
@*@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，也希望这对您有所帮助
回答by Manoj Patil
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 变量返回到第一个版本的变量。
Sometimes 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>
回答by Hitesh Sahu
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 = 在表上添加导出按钮的 javascript tbl
$('#tbl').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
Result :-
结果 ：-
回答by tenstormavi
There can be two reasons for that error:
该错误可能有两个原因：
First
第一的
You are loding jQuery.DataTables.jsbefore jquery.jsso for that :-
你jQuery.DataTables.js之前是jquery.js这样的：-
You need to load jQuery.jsbefore you load jQuery.DataTables.js
你需要在加载jQuery.js之前加载jQuery.DataTables.js
Second
第二
You are using two versions of jQuery.json the same page so for that :-
您jQuery.js在同一页面上使用了两个版本，因此：-
Try to use the higher version and make sure both links have same version of jQuery
尝试使用更高版本并确保两个链接的版本相同 jQuery
回答by Tech Yogesh
I know its late Buy can help someone
我知道它迟到 购买可以帮助某人
This could also happen if you don't add $('#myTable').DataTable();inside the document.ready
如果您不在$('#myTable').DataTable();内部添加，也可能发生这种情况document.ready
So instead of this
所以而不是这个
$('#myTable').DataTable();
$('#myTable').DataTable();
Try This
尝试这个
$(document).ready(function() {
$('#myTable').DataTable();
});
回答by muhammad tayyab
Honestly, this took hours to get this fixed. Finally only one thing worked a reconfirmation to solution provided by "Basheer AL-MOMANI". Which is just putting statement
老实说，这需要几个小时才能解决。最后只有一件事重新确认了“Basheer AL-MOMANI”提供的解决方案。这只是把声明
@RenderSection("scripts", required: false)
within _Layout.cshtmlfile after all <script></script>elements and also commenting the jquery script in the same file. Secondly, I had to add
在_Layout.cshtml所有<script></script>元素之后的文件中，并在同一文件中注释 jquery 脚本。其次，我不得不补充
$.noConflict();
within jquery function call at another *.cshtml file as:
在另一个 *.cshtml 文件中的 jquery 函数调用中：
$(document).readyfunction () {
$.noConflict();
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
});
});
回答by Mike Volmar
I ran into this error also. For whatever reason I had originally coded
我也遇到了这个错误。无论出于何种原因，我最初编码
var table = $('#myTable').DataTable({
"paging": false,
"order": [[ 4, "asc" ]]
});
This would not throw the error sometimes and other times it would. By changing code to
这有时不会抛出错误，有时会。通过将代码更改为
$('#myTable').DataTable({
"paging": false,
"order": [[ 4, "asc" ]]
});
Error appears to have stopped
错误似乎已停止
回答by Agath
In my case the solution was to delete cookies from the browser.
就我而言，解决方案是从浏览器中删除 cookie。
