TypeError: $(...) . DataTable 不是函数

我正在尝试与 jQuery 的可数据化 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 文件结构如下:

File structure of JS and CSS in solution

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

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

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

我还没有绑定任何动态数据在这里(如在中继器左右) ，它仍然不工作。

有没有人能给我指点一下解决这个问题的正确方向？

517045 次浏览
小开
最佳答案

因为

此错误可能有多种原因。

  • 缺少 jQueryDataTables 库。
  • JQuery 库加载 之后 jQuery 数据表。
  • 加载多个版本的 jQuery 库。

解决方案

包括 只有一个版本的 jQuery 库1.7或更新的 之前 jQuery DataTable。

例如:

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

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

小开

我得到这个错误是因为我发现我引用了两次 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 也有帮助

小开

这个错误可能有两个原因:

首先

你在 jquery.js之前装载 jQuery.DataTables.js，因此:-

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

第二

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

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

小开

如果由于某种原因加载了两个版本的 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>
小开

下面是导出表插件完美工作所需的一整套 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">

在表中添加 id = tbl的导出按钮

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

结果:-

enter image description here

小开

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

我知道现在很晚了 买可以帮助别人

如果不在 document.ready中添加 $('#myTable').DataTable();，也可能发生这种情况

所以不是这样

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

试试这个

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

说实话，修好这个花了好几个小时。最后，只有一件事情对“巴希尔 · 阿尔-莫马尼”提供的解决方案进行了重新确认。只是做个声明而已

   @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,
});


});
小开

我也遇到了这个错误

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

这不会有时抛出错误，有时会抛出错误

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

错误似乎已停止

小开

在我的案例中，解决方案是从浏览器中删除 cookie。

小开

在 Flask 中遇到了同样的问题，我已经有了一个加载 JQuery、 Popper 和 Bootstrap 的模板。我正在将这个模板扩展到其他模板中，这些模板是用来加载包含该表的页面的基础。

由于某种原因，在 Flask 中，外部模板中的文件显然比层次结构中上面表中的文件(您正在扩展的文件)先加载，所以 JQuery 是在 DataTables 文件之前加载的，这导致了问题。

我必须创建另一个模板，在同一个地方运行所有 JS CDN 导入，这解决了问题。

小开

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

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

为了删除错误，在确保满足上述条件之后，向包含 DataTables 的标记添加“ defer”。比如说,

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

有时候脚本(初始化数据表)会嵌入到一个通用的页面模板中，所以如果其中一个页面实际上没有任何表，并且你没有为数据表导入与 jquery 相关的文件，你就会面临这个错误，因为通用的初始化仍然在寻找这个错误。(这是放在我箱子里的)

解决方案: 是将数据表的初始化包装在一个检查库是否存在的条件中，然后:

这里有一个实际的例子。

if (typeof jQuery.fn.DataTable != "undefined"){
$('#accordionExample table').DataTable( {
"pageLength": 5,
"info": false,
"order": [[ 1, "desc" ]]
} );
}
小开

我尝试了很多方法，但我的解决方案是在 html 脚本之后添加“延迟”，即包含数据表。

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js" defer></script>
小开

我已经将 推迟添加到数据表 jquery 库引用中。现在它正在为我工作。

<script src="~/Scripts/jquery.dataTables.min.js" defer></script>
小开

如果编写的是数据表而不是 DataTable，也可能发生这种情况。(DataTable T 必须是大写)。这是初学者的错误。

$(document).ready(function() {
$('#category-table').DataTable({
// Your Code
});
小开

如果您确定如上所述对齐了您的脚本，请确保您的 DataTable 大小写是正确的。

之前

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

之后

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

小 t 正在制造问题，当我把这个 t 改成 T 的时候，效果非常好。


提交答案