尝试运行或启动 dataTables.js 时收到 TypeError
Posted
技术标签:
【中文标题】尝试运行或启动 dataTables.js 时收到 TypeError【英文标题】：Receiving a TypeError when trying to run or initiate dataTables.js 【发布时间】：2020-09-19 10:48:21 【问题描述】：我正在尝试使用名为 dataTables.js 的插件运行或启动脚本。我已经设法使用ES6 import 语句和jquery 依赖项导入库。当我尝试运行或启动插件时，我收到如下所示的错误
jQuery.Deferred exception: (0 , _jquery.default)(...).DataTable is not a function TypeError: (0 , _jquery.default)(...).DataTable is not a function
at htmlDocument.eval (https://juwto.csb.app/src/index.js:13:37)
at j (https://juwto.csb.app/src/jquery.js:1977:29)
at k (https://juwto.csb.app/src/jquery.js:1983:19)
沙盒链接 - https://codesandbox.io/s/gracious-chaplygin-juwto?file=/index.html
即使我设法正确导入库，我似乎也找不到合适的解决方案或答案
import $ from "./jquery";
import _dt from "./datatables";
$(document).ready(function()
$("#table").DataTable(
paging: false,
bFilter: false,
bInfo: false
);
);
【问题讨论】：
您的表 ID 是table_id，而不是 table。将此$("#table").DataTable( 更改为$("#table_id").DataTable(，如果问题仍然存在，请参阅：***.com/questions/31227844/…
您只想在index.js 中导入jquery 和datatables？
【参考方案1】：
你有几个错误，第一个是 S. Esteves 所说的，你的导入应该是这样的
import "./datatables";
第二个是dani说的，我的意思是你用错了id。
$("#table_id").DataTable(
paging: false,
bFilter: false,
bInfo: false
);
最后一个是jquery是在DataTable之后加载的。我认为不幸的是 datatable.js 无法有条件或即时加载，因此我建议您将脚本添加到 index.html 文件的头部。您还需要加载 css 并且不要忘记 jquery 必须是第一个。
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
type="text/javascript"
src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"
></script>
</head>
<body>
<div class="button">button</div>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>192.168.254.120</td>
</tr>
<tr>
<td>D</td>
<td>192.168.254.121</td>
</tr>
<tr>
<td>C</td>
<td>192.168.254.122</td>
</tr>
<tr>
<td>B</td>
<td>192.168.254.123</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function()
$("#table_id").DataTable();
);
</script>
</body>
</html>
无论哪种方式我都会尝试考虑进口的解决方案，如果有什么我会回到这里，希望对您有所帮助！
【讨论】：
【参考方案2】：假设路径正确，尝试像这样导入DataTables：import "./datatables.net";
【讨论】：
这将导致ModuleNotFoundError Could not find module in path: './datatables.net' relative to '/src/index.js'
您是如何将 DataTables 安装/导入到您的项目中的？
能否再次从datatables.net/download 下载DataTables 源代码。确保只下载 DataTables 包 - 不带 jQuery。
另一种可能的解决方案是使用 NPM 或 Yarn 添加 DataTables 并在 import "datatables.net"; 或 const dataTable = require("datatables.net")(); 等代码中导入/要求它
由于缺少这些细节，您可以尝试下载捆绑了 jQuery 的 DataTables 吗？删除您的 jQuery 源代码。我已经阅读了多个版本的 jQuery 会导致该错误。以上是关于尝试运行或启动 dataTables.js 时收到 TypeError的主要内容，如果未能解决你的问题，请参考以下文章
Rails 6 + Webpack + jQuery 刷新时不保存更改