java - 将 JS 与 wicket 集成-6ren

java - 将 JS 与 wicket 集成

转载作者：行者123 更新时间：2023-12-01 05:45:46

27

4

我有以下 js 代码和 html 文件来在我的页面中生成响应式表格:

$(document).ready(function(){
    $('#myTable').dataTable();
});

<!DOCTYPE html>   
<html lang="en">   
<head>   
<meta charset="utf-8">   
<title>Example of Employee Table with twitter bootstrap</title>   
<meta name="description" content="Creating a Employee table with Twitter Bootstrap. Learn with example of a Employee Table with Twitter Bootstrap.">  
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>  
<body style="margin:20px auto">  
<div class="container">
<div class="row header" style="text-align:center;color:green">
<h3>Bootstrap Table With sorting,searching and paging using dataTable.js (Responsive)</h3>
</div>
<table id="myTable" class="table table-striped" >  
        <thead>  
          <tr>  
            <th>ENO</th>  
            <th>EMPName</th>  
            <th>Country</th>  
            <th>Salary</th>  
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>001</td>  
            <td>Anusha</td>  
            <td>India</td>  
            <td>10000</td>  
          </tr>  
          <tr>  
            <td>002</td>  
            <td>Charles</td>  
            <td>United Kingdom</td>  
            <td>28000</td>  
          </tr>  
          <tr>  
            <td>003</td>  
            <td>Sravani</td>  
            <td>Australia</td>  
            <td>7000</td>  
          </tr>  
    	   <tr>  
            <td>004</td>  
            <td>Amar</td>  
            <td>India</td>  
            <td>18000</td>  
          </tr>  
          <tr>  
            <td>005</td>  
            <td>Lakshmi</td>  
            <td>India</td>  
            <td>12000</td>  
          </tr>  
          <tr>  
            <td>006</td>  
            <td>James</td>  
            <td>Canada</td>  
            <td>50000</td>  
          </tr>  
		  
		   <tr>  
            <td>007</td>  
            <td>Ronald</td>  
            <td>US</td>  
            <td>75000</td>  
          </tr>  
          <tr>  
            <td>008</td>  
            <td>Mike</td>  
            <td>Belgium</td>  
            <td>100000</td>  
          </tr>  
          <tr>  
            <td>009</td>  
            <td>Andrew</td>  
            <td>Argentina</td>  
            <td>45000</td>  
          </tr>  
		  
		    <tr>  
            <td>010</td>  
            <td>Stephen</td>  
            <td>Austria</td>  
            <td>30000</td>  
          </tr>  
          <tr>  
            <td>011</td>  
            <td>Sara</td>  
            <td>China</td>  
            <td>750000</td>  
          </tr>  
          <tr>  
            <td>012</td>  
            <td>JonRoot</td>  
            <td>Argentina</td>  
            <td>65000</td>  
          </tr>  
        </tbody>  
      </table>  
	  </div>
</body>  
  </html>

当我在here上使用它时或者，如果我从文件中打开 .html，它就可以正常工作。

但是，如果我将它放在我的 wicket 项目中并编译并运行，我得到的只是一个没有分页、搜索选项等的表格。

在 Wicket 口项目中，我用 Wicket 口面板将其包围，如下所示:

<body style="margin:20px auto"><wicket:panel>

其他一切都几乎相同。

最佳答案

您的 JavaScript 引用存在冲突。 Wicket 附带了自己的 JQuery 版本(您可以使用 Application#getJavaScriptLibrarySettings 配置 - 我会保持原样)。

首先，您需要从 HTML 文件中删除对 CSS 和 JavaScript 库的所有引用，您需要在页面(或面板)中通过 Java 来管理它们。接下来，您需要通过覆盖 renderHead(IHeaderResponse) 将它们以正确的顺序包含在页面或面板中(您可以为此创建自己的 ResourceReference)。方法:

@Override
public void renderHead(IHeaderResponse response) {
    super.renderHead(response);

    response.render(CssHeaderItem.forUrl("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"));
    response.render(CssHeaderItem.forUrl("http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"));

    // First render the JQuery reference
    response.render(JavaScriptHeaderItem.forReference(getApplication().getJavaScriptLibrarySettings().getJQueryReference()));

    // Then render the dependent JavaScript libraries
    response.render(JavaScriptHeaderItem.forUrl("http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"));
    response.render(JavaScriptHeaderItem.forUrl("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"));

    // Finally render the dom ready script
    response.render(OnDomReadyHeaderItem.forScript("$('#myTable').dataTable();"));
}

关于java - 将 JS 与 wicket 集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26963748/

27

4

0

文章推荐： java - 如何从 jar 文件调用 servlet

文章推荐： javascript - jQuery 表单不发送数据

文章推荐： javascript - 加载jquery和谷歌地图

c# - Windows 集成 (NTLM) 身份验证与 Windows 集成 (Kerberos)
Windows 集成 (NTLM) 身份验证和 Windows 集成 (Kerberos) 之间有什么区别？如何在IIS6中实现这些 w.r.t. MSDN 最佳答案 Kerberos 和 NTLM
node.js - 无法将 Keycloak 与 Sails 集成。能够将 Keycloak 与 Express 集成
Keycloak是一个用 Java 编写的开源身份验证和身份管理解决方案。它提供了一个nodejs适配器，使用它我能够成功地与express集成。这是有效的路由文件: 'use strict'
Bamboo 集成
这是我关于 Bamboo 的第二个问题 ( My First One )。阅读建议信息后我的理解是，我需要一个构建工具，例如 nAnt 或 MSbuild 来编写一个获取源代码并构建它的脚本(我正在开
JIRA 集成
可用于将第三方应用程序与 jira 4.3 集成的身份验证方案有哪些？显然，从客户那里获取用户名和密码听起来很荒谬。另外，我知道 oauth 身份验证仅适用于版本 5。请告诉我。谢谢。附注。我不是在
JMS/DDS 集成
我有一个使用 DDS 的旧版 C++ 应用程序用于异步通信/消息传递。我需要将此应用程序集成到使用 JMS 进行消息传递的 JavaEE 环境中。除了构建独立的 JMS/DDS 桥接模块之外，我还有其
Clickatell - Whatsapp 集成
我正在尝试使用 Whatsapp 发送测试消息，但收到此错误消息: "error":{"code":27,"description":"Recipient not available on chann
django - 集成 Photologue
我想将 photologue 与我的 Django 应用程序集成，并使用它在车辆库存中显示照片......有点像 Boost Motor Group Inc. 提供的内容。我已经集成了该应用程序，所以
scanning - ScanSnap 集成
我目前正在尝试弄清楚如何与 fujitsu scansnap 扫描仪集成，但没有从 fujitsu 找到有关 fujitsu scansnap 管理器如何调用您的应用程序并将文件发送到您的应用程序的详
Spring 集成 - 多入站适配器不起作用
在我的项目中，我使用了 9 个(九个)int-ip:udp-inbound-channel-adapter 和一个 jms:inbound-channel-adapter。 Jms 适配器从服务器接收
JSF/Applet 集成
在我们当前的原型(prototype)中，大多数标准 HTML 控件都被小程序取代，最重要的是表单提交由小程序触发。有没有一种方法可以像一样在服务器端调用关联的操作 ? 本文Applet and
Twilio whatsapp 集成
是否可以使用 twilio 号码从 whatsapp 发送/接收短信？有人用whatsapp试过twilio吗？我问过客服，如果可能的话，他说，不确定，但很多人都问过这个问题。最佳答案万一其他人来
svn - SVN是否与Notepad++集成？
我们办公室中几乎不存在版本控制，这显然导致了很多麻烦。我们想使用SVN和Notepad++进行设置...任何人都对如何实现此目标有任何想法？我已经开始研究并浏览了这个网站: http://www.sw
Spring-Drools 集成？
曾经有提供这种集成的 spring-modules 项目；但是，该项目现已弃用。现在有没有人继续支持这种集成？谢谢。最佳答案工作正在进行中。 http://blog.athico.com/sear
DBpedia/Yago 集成
我的理解是，根据 http://wiki.dbpedia.org/Datasets，DBpedia 从 YAGO 获取类层次结构，而不是实体。 .但是，类似 http://dbpedia.org/cl
Opencms Spring 集成
任何人都可以帮助我如何将 OpenCMS 与 Java Spring Web 应用程序集成。已经用谷歌搜索并浏览了很多网站但没有用。所以，请帮助我。最佳答案我认为将 SpringMVC 与 Ope
integration - MPGS 集成
我正在尝试使用新的 migs getaway (MPGS) 我遵循了下一个 url 中的代码 https://ap-gateway.mastercard.com/api/documentation/i
TeamCity gitlab 集成
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 4年前关闭。 Improve thi
Vim Cmake 集成
我有一个 cmake 项目。我想轻松完成以下操作搜索光标下任何变量、函数等的声明、定义和引用，这些可能在外部头文件中声明，其路径是在CMakeLists.txt中使用INCLUDE_DIRECTOR
iPhone FTP 集成
有人能给我指点一下 Objective-C(或 c/c++)库的方向，或者教通过 FTP 上传或下载的教程(Objective-C)吗？最好能展示如何将文件下载到临时目录，然后稍后上传？我不介意针对
r - 集成()给出了完全错误的数字
集成()给出了非常错误的答案: integrate(function (x) dnorm(x, -5, 0.07), -Inf, Inf, subdivisions = 10000L) # 2.127

首页

博学

6Ren·AI

商城

java - 将 JS 与 wicket 集成