将 JS 与检票口集成答案

【问题标题】：Integrating JS with wicket将 JS 与检票口集成
【发布时间】：2014-11-17 00:29:46
【问题描述】：

我有以下 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>

其他的都差不多。

【问题讨论】：

$('#myTable').dataTable() 在检票口面板中使用时是否会抛出任何错误？
不，完全没有错误。如您所见，它甚至可以在 SO 上运行。
你能出示你的检票口代码吗？你如何设置表的ID？以及如何将其传递给您的 javascript？
嗯，有趣的一点。我的桌子没有检票口 ID。 html 中的每个组件都需要一个检票口 ID 吗？
@SpiderRico，从你的问题我可以看出你对 Wicket 并不熟悉。请花一些时间学习基础知识，例如这里：wicket.apache.org/learn/examples/helloworld.html 或这里：wicket.apache.org/guide/guide/single.html

标签： java javascript jquery twitter-bootstrap-3 wicket

【解决方案1】：

您有冲突的 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();"));
}

【讨论】：