XPage: Tablesorter for Datatable

Question

i was trying to implement a tablesorter to one of my datatable (XPages). So i have addres jquery-1.11.1.js and the 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>

Can you tell me, why its not working?

Regards

Answer 1

If you look at the produced HTML source you will find out that your data table doesn't have the id "dataTable1" as XSP computes those ids at runtime. Your datatable has a class though, so you can use this to init your jQuery script like this:

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

Another option is to compute the id within the script (this works as long your script resides in the xp:scriptBlock tag and not in an external library), like this:

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

This may not function though because jQuery doesn't like colons in the id's name, so you want to have a look at this workaround: http://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages