蒲公英数据表无法加载 jquery-ui

Question

最近我安装了Dandelion datatables 1.1.1，不知道如何激活核心库自带的jquery-ui。我需要它来使用日期选择器。

在我的项目中使用了以下架构：

src
web 
|__ resources
    |__ css
    |__ js
|__ WEB_INF
    |__ views
        |__ ... html views
    |__ spring-servlet.xml

我通过以下方式在 spring-servlet 中加载蒲公英资源：

<mvc:resources mapping="/dandelion/**" location="classpath:/META-INF/resources/dandelion/"/>

在 js 文件夹中我有 datepicker-init.js :

$(document).ready(
  function () {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  }
);

然后我尝试在我的 header

中加载这个脚本

<script th:src="@{/resources/js/datepicker-init.js}"></script>

然后在我的 html 页面上使用它：

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:dt="http://www.thymeleaf.org/dandelion/datatables">
               ....
              <div id="filter_panel">
                    <form th:action="@{/requests}" th:object="${requestRegisterModel}"
                          method="post">
                        <input id="datepicker" type="text" />
                    </form>
              </div>

但在浏览器控制台中出现 Uncaught ReferenceError: $ is not defined 错误。我知道发生此错误是因为 jquery-ui 未定义，但我无法在我的 header:

中加载脚本

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

因为在这种情况下 jquery 脚本加载了两次。我发现了类似的问题 here，但我认为可以在没有资产包的情况下加载 jquery-ui，但仍然不知道该怎么做。其他一切正常。

Browser console

Answer 1

好的，我终于成功了。 JQuery 随蒲公英数据 table 一起提供，因此无需导入两次。但是 jquery 仅在 table 加载后加载，所以我需要包含 jquery-ui

的脚本

<script type="text/javascript" src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

在 table 之后，例如在页脚中。

蒲公英数据表无法加载 jquery-ui

Dandelion Datatables can't load jquery-ui

datatable

jquery

jquery-ui

spring-mvc

dandelion