Question

我正在尝试在XPage中实现我的第一个jquery DataTable，甚至无法获得基本的HTML版本来初始化。

我已将下载的文件添加到Package Explorer中的WebContent文件夹中。所以我有......

文件夹中的WebContent - DataTables- examples / extensions / media等。

我修改了我的应用程序主题，其中包含其他所有内容......

<resource>
<content-type>application/x-javascript</content-type>
<href>DataTables/media/js/jquery.dataTables.min.js</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>DataTables/extensions/FixedColumns/css/dataTables.fixedColumns.min.css</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>DataTables/extensions/FixedColumns/js/dataTables.fixedColumns.js</href>
</resource>
<resource> <content-type>text/css</content-type>
<href>DataTables/media/css/jquery.dataTables.min.css</href>
</resource>

我在页面上添加了一个脚本块

`<xp:scriptBlock>
 <xp:this.value><![CDATA[
 $(document).ready(function() 
 {
$("#tableSimple").DataTable(); 
 } 
 ); 
]]></xp:this.value>
</xp:scriptBlock>

我使用了DataTable网站上的示例数据。

<table id="tableSimple" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>.....etc

无论我怎样都无法加载DataTable。我曾在他的博客上尝试过Oliver Busse的nsf同一主题，并且也无法让它工作。

我显然错过了一些东西而且我有点像新手，如果这是一个基本问题，那就很抱歉，但我失去了生活在此的意愿！任何帮助，将不胜感激。

Answer 1

我认为您正在看到AMD的问题。谷歌AMD和XPage，您将看到可能的解决方案 - 如https://xomino.com/2015/06/08/fixing-the-xpages-r9-dojo-define-amd-problem-once-and-for-all/

霍华德

Answer 2

在你的主题中，你是否正在扩展＆＃34; webstandard＆＃34;还是一个引导版本？你必须在dataTables.js之前的html头中列出jQuery。你在网页上列出了什么？

我已经在许多应用程序中使用了这个，这里是我用的一个XPage的html头，其中包含一个jQuery dataTable（我省略了不相关的行）：

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="dataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

在主题中，我将它设置为＆＃34; webstandard＆＃34;确保jQuery是第一个，我拥有所有的CSS。

Answer 3

如果我没弄错的话，我认为AMD问题已经在Oliver的数据库中修复了？（我可能错了？）

如果您启用了firebug / developer工具，那么控制台选项卡上是否会显示任何错误？或者多米诺骨牌日志中是否出现任何错误？

此外，表格标题是否被绘制而不是内容，或者你甚至没有获得表格标题？

唯一可以轻微跳出来的是Oliver使用bower进行安装，因为你已经复制/粘贴了你需要的资源。因此，文件结构略有不同，因此可能值得检查是否有对bower文件路径的文件/脚本的引用？

哦，你在使用资源聚合吗？我认为一些CSS使用相对路径，所以你可能只需要更新这些？

你是在初始化桌子吗？

Answer 4

我现在有这个工作。令人沮丧的是，我无法确定故障的位置。我只能通过删除所有以前复制的元素并将Michael Smith示例中的每个相关元素复制到我的应用程序中来解决它。

我注意到表格不能是<xp:table>我暂时没有意识到的。

非常感谢所有建议。

在XPage中实现jquery DataTable

4 个答案: