TypeError:$(...).DataTable不是函数
Abh*_*osh 62 javascript css asp.net jquery datatables
我正试图通过此链接使用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引用,如手册中所示.渲染仍然不如预期.没有CSS,甚至JS都不起作用.
同样在控制台中我收到以下错误:
ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function
我还没有在这里绑定任何动态数据(比如在转发器内等)仍然无法正常工作.
有人可以指导我正确的方向来解决这个问题吗？
Gyr*_*com 81
在加载任何与jQuery相关的代码(如jQuery DataTables)之前,需要加载jQuery ,如下所示:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
此外,对于生产版本,建议加载缩小版本(以__CODE__替代结束).
有关此错误和其他常见控制台错误的详细信息,请参阅jQuery DataTables:常见JavaScript控制台错误.
- 我这样做了,但这不起作用! (16认同)
小智 32
这对我有用.但请确保在首选的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>
- 该方法中的$ .noConflict（）调用对我来说很关键。谢谢。 (4认同)
- @jrebs 对我来说也解决了这个问题 (2认同)
Bas*_*ANI 31
我收到此错误是因为我发现我引用了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
小智 15
在 Laravel 项目中使用 DataTables 时会发生同样的错误。即使尝试了以下解决方案，错误仍然存在：
- 确保包含 jQuery
- 在包含 DataTables 之前包含 jQuery
- 确保只添加一个版本的 jQuery
为了消除错误，在确保满足上述条件后，将“defer”添加到包含数据表的标签中。例如，
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" defer></script>
Man*_*til 13
如果由于某种原因加载了两个版本的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>
该错误可能有两个原因：
第一的
你jQuery.DataTables.js之前是jquery.js这样的：-
你需要在加载jQuery.js之前加载jQuery.DataTables.js
第二
您jQuery.js在同一页面上使用了两个版本，因此：-
尝试使用更高版本并确保两个链接的版本相同 jQuery
以下是导出表插件完美运行所需的完整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'
]
});
结果: -
小智 5
我尝试了很多方法，但我的解决方案是在包含数据表的 html 脚本之后添加“defer”。
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js" defer></script>