Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

当我在here上使用它时，或者如果我从文件中打开.html它就完美无缺。

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

在wicket项目中，我用这样的wicket面板围绕它：

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

其他一切都差不多。

Answer 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();"));
}

将JS与wicket集成

1 个答案: