jquery - XP页 : Tablesorter for Datatable

Question

我试图实现 tablesorter到我的数据表之一(XPages)。所以我有 addres jquery-1.11.1.js 和 jquery.tablesorter.min.js

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.resources>
<xp:script src="/jquery-1.11.1.js" clientSide="true"></xp:script>
<xp:script src="/jquery.tablesorter.min.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock>

<xp:this.value><![CDATA[

$(document).ready(function() 
{ 
    $("#dataTable1").tablesorter(); 
} 
); 

    ]]></xp:this.value>
    </xp:scriptBlock>

<xp:dataTable id="dataTable1" rows="30" styleClass="tablesorter">
    <xp:column id="column1">
    <xp:text escape="true" id="computedFieldName"><xp:this.value>  
<![CDATA[#  {javascript:testArray[0]}]]></xp:this.value></xp:text>
        <xp:this.facets>
<xp:label value="Name" id="label1" xp:key="header"></xp:label></xp:this.facets> 
</xp:column>
<xp:column id="column2">
<xp:text escape="true" id="computedFieldAdress"><xp:this.value><![CDATA[# 
{javascript:testArray[1]}]]></xp:this.value></xp:text>
<xp:this.facets>
<xp:label value="Adress" id="label2" xp:key="header"></xp:label></xp:this.facets> 
</xp:column>
</xp:dataTable>

</xp:view>

你能告诉我，为什么它不起作用吗？

问候

Answer 1

如果您查看生成的 HTML 源代码，您会发现您的数据表没有 id“dataTable1”，因为 XSP 在运行时计算这些 id。不过，您的数据表有一个类，因此您可以使用它来初始化 jQuery 脚本，如下所示:

$(".tablesorter").tablesorter();

另一个选项是计算脚本内的 id(只要您的脚本驻留在 xp:scriptBlock 标记中而不是外部库中，此方法就有效)，如下所示:

var dataTable = dojo.byId("#{id:dataTable1}"); // get the element by it's real id
var tableId = dataTable.id;
$("#"+tableId).tablesorter();

这可能不起作用，因为 jQuery 不喜欢 id 名称中的冒号，所以您想看看这个解决方法:http://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages