错误 jquery : Uncaught TypeError: $(...).DataTable is not a function答案

【问题标题】：Error jquery : Uncaught TypeError: $(...).DataTable is not a function错误 jquery : Uncaught TypeError: $(...).DataTable is not a function
【发布时间】：2018-07-17 12:40:29
【问题描述】：

我尝试了两天使用 jquery 添加搜索字段和排序数据表，但总是显示此错误：

未捕获的 TypeError: $(...).DataTable 不是函数

我更改了脚本源顺序但无法运行

PS：我正在使用百里香，引导

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <link th:replace="fragments/header :: header" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
</head>
<body>
  <div th:replace="fragments/menu :: menu"></div>
  <div class="row">
    <div class="col-md-4">
      <h1>Listado de Provinces</h1>
    </div>
    <div class="col-md-8">
      <a href="/createprovince" class="btn btn-primary a-btn-slide-text">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        <span><strong>Crear Province</strong></span>
      </a>
      <a href="/home" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Home</a>
    </div>
  </div>
  <table id="example" class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Nombre</th>
        <th scope="col">Opciones</th>
      </tr>
    </thead>
    <tbody>
      <tr th:each="province : ${provinces}">
        <td th:text="${province.name}"></td>
        <td class="options">
          <a th:href="@{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
            <span><strong>Modificar</strong></span>
          </a>
          <a th:href="@{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
            <span><strong>Borrar</strong></span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#example').DataTable({
        "pagingType": "full_numbers"
      });
    });
  </script>
  <div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>

This a screen shoot

【问题讨论】：

你清除浏览器缓存了吗？
发布实际 HTML，而不是伪代码。
看起来您正在使用的那个 jquery 文件已损坏 - 如果您将其更改为来自 ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js 的那个，则上述 sn-p 开始工作
在http 上加载 jQuery 而 DataTables 插件的 JS 在https 上的任何特殊原因？
查看队列，注意用户的自我回答：“问题的根源是与另一个 jquery 本地文件冲突”

标签： javascript jquery spring-boot datatables thymeleaf

【解决方案1】：

出现此错误是因为此代码 sn-p 没有采用不安全的链接，因此您将 https:// 用于加载数据表。与其他编辑器一起使用 http:// 来检查它，这对我来说很有效。
第一列的正文没有值。数据表显示此类型，如果错误和警报，因为错过了值。

有时候

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <link th:replace="fragments/header :: header" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#example').DataTable({
        "pagingType": "full_numbers"
      });
    });
  </script>
</head>
<body>
  <div th:replace="fragments/menu :: menu"></div>
  <div class="row">
    <div class="col-md-4">
      <h1>Listado de Provinces</h1>
    </div>
    <div class="col-md-8">
      <a href="/createprovince" class="btn btn-primary a-btn-slide-text">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        <span><strong>Crear Province</strong></span>
      </a>
      <a href="/home" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Home</a>
    </div>
  </div>
  <table id="example" class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Nombre</th>
        <th scope="col">Opciones</th>
      </tr>
    </thead>
    <tbody>
      <tr th:each="province : ${provinces}">
        <td th:text="${province.name}">1</td>
        <td class="options">
          <a th:href="@{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
            <span><strong>Modificar</strong></span>
          </a><br/>
          <a th:href="@{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
            <span><strong>Borrar</strong></span>
          </a>
        </td>
      </tr>
      <tr th:each="province : ${provinces}">
        <td th:text="${province.name}">2</td>
        <td class="options">
          <a th:href="@{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
            <span><strong>Modificar</strong></span>
          </a><br/>
          <a th:href="@{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
            <span><strong>Borrar</strong></span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
  
  <div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>

【讨论】：

【解决方案2】：

感谢您的回答，我已经解决了这个问题。问题的根源是与另一个 jquery 本地文件冲突

【讨论】：