尝试运行或启动 dataTables.js 时收到 TypeError答案

【问题标题】：Receiving a TypeError when trying to run or initiate dataTables.js尝试运行或启动 dataTables.js 时收到 TypeError
【发布时间】：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({，如果问题仍然存在，请参阅：stackoverflow.com/questions/31227844/…
您只想在index.js 中导入jquery 和datatables？

标签： javascript ecmascript-6 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 会导致该错误。