Question

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

未捕获的TypeError：$（...）。DataTable不是函数

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

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

＆＃13;

<!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>

＆＃13;

This a screen shoot

Answer 1

出现此错误是因为此代码段未采用不安全链接，因此您将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>

Answer 2

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

错误jquery：未捕获TypeError：$（...）。DataTable不是函数

2 个答案: