Question

我试图在我的一个数据表（XPages）中实现tablesorter。所以我有地址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

XPage：数据表的Tablesorter

1 个答案: