TypeError: $(…).DataTable 不是 jQuery 中的函数

TypeError: $(…).DataTable is not a function in jQuery

“$(…).DataTable is not a function” jQuery 错误的发生有多种原因：

忘记包含 DataTables 库。
在 jQuery 库之前加载 DataTables 库。
加载 jQuery 库两次。
指定了错误的 jQuery 文件路径。

要解决“$(…).DataTable 不是函数”jQuery 错误，请确保在加载 DataTables 库之前加载 jQuery 库。

这些库应该只在页面上加载一次，否则会抛出错误。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!-- ✅ Load CSS file for DataTables  -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
      integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load DataTables ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
      integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>

  <body>
    <!-- 👇️ HTML for Table  -->
    <table id="example" class="display" style="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>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Jenette Caldwell</td>
          <td>Development Lead</td>
          <td>New York</td>
          <td>30</td>
          <td>2011/09/03</td>
          <td>$345,000</td>
        </tr>
        <tr>
          <td>Yuri Berry</td>
          <td>Chief Marketing Officer (CMO)</td>
          <td>New York</td>
          <td>40</td>
          <td>2009/06/25</td>
          <td>$675,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>

    <!-- Your JS code here  -->
    <script src="index.js"></script>
  </body>
</html>

加载脚本的顺序非常重要：

加载 DataTables 库的 CSS 文件。
加载 jQuery 库。
加载数据表库。
加载您的 JavaScript 代码。

这是index.js文件中的代码：

索引.js


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

如果您打开浏览器，您将看到表格加载。

在初始化 DataTables 库之前，我们确保 DOM 已准备就绪。

如果您忘记加载DataTable库或在 DataTables 库之前加载 jQuery 库，则会出现错误。

如果错误仍然存在，请确保您没有加载 jQuery 库两次。第二次加载库会重新运行初始化过程并导致错误。

从本地文件系统上的文件加载库时，请确保指定的路径正确并指向正确的文件。

指定错误的 jQuery 或 DataTables 脚本路径等同于根本不加载脚本。

F12您可以通过按下并单击选项卡打开您的开发人员工具来检查您是否正确加载了脚本Console。

如果您看到任何404与加载 jQuery 脚本相关的错误，则文件路径不正确。

结论

要解决“$(…).DataTable 不是函数”jQuery 错误，请确保在加载 DataTables 库之前加载 jQuery 库。这些库只能在页面上加载一次，否则会抛出错误。

–