Sortable DataTable in WebSphere portal

[Alex Gerts]

Hi All,

I am new comer to this forum. I am trying to use <t:dataTable> with sortable feature using JSF 1.1 WebSphere portal 6.1.5.
Here is my jsp:
<f:subview id="programsSearch">
<t:div id="programsTable">
<t:panelGroup id="table">
<t:dataTable
value="#{CPDProgramsSearchBean.programsListSearchResult}"
var="program"
sortColumn="#{CPDProgramsSearchBean.sortColumn}"
sortAscending="#{CPDProgramsSearchBean.ascending}"
preserveDataModel="true"
preserveSort="true"
sortable="true"
newspaperOrientation="horizontal"
border="1"
columnClasses="cellText_center"
cellpadding="2">

<t:column width="15%">
<f:facet name="header">
<%-- <t:commandSortHeader columnName="programName" arrow="true"> --%>
<hutputText value="#{bundle['programsearch.program_name']}" />
<%-- </t:commandSortHeader> --%>
</f:facet>
<hutputText escape="false" value=" " rendered="#{program.courseName == ''}"/>
<hutputText value="#{program.courseName}" rendered="#{program.courseName != ''}"/>
</t:column>

<t:column>
<f:facet name="header">
<hutputText value="#{bundle['programsearch.accredited']}" />
</f:facet>
<hutputText escape="false" value=" " rendered="#{program.accredited == ''}"/>
<hutputText value="#{program.accredited}" rendered="#{program.accredited != ''}"/>
</t:column>

<t:column>
<f:facet name="header">
<hutputText value="#{bundle['programsearch.provider']}" />
</f:facet>
<hutputText escape="false" value=" " rendered="#{program.provider == ''}"/>
<hutputText value="#{program.provider}" rendered="#{program.provider != ''}"/>
</t:column>

<t:column>
<f:facet name="header">
<hutputText value="#{bundle['programsearch.date']}" />
</f:facet>
<hutputText escape="false" value=" " rendered="#{program.startDate == ''}"/>
<hutputText value="#{program.startDate}" rendered="#{program.startDate != ''}"/>
</t:column>

<t:column>
<f:facet name="header">
<hutputText value="#{bundle['programsearch.area_of_law']}" />
</f:facet>
<hutputText escape="false" value=" " rendered="#{program.areaOfLawDescription == ''}"/>
<hutputText value="#{program.areaOfLawDescription}" rendered="#{program.areaOfLawDescription != ''}"/>
</t:column>

<t:column>
<f:facet name="header">
<hutputText value="#{bundle['programsearch.closed_program']}" />
</f:facet>
<hutputText escape="false" value=" " rendered="#{program.closedProgram == ''}"/>
<hutputText value="#{program.closedProgram}" rendered="#{program.closedProgram != ''}"/>
</t:column>
</t:dataTable>
</t:panelGroup>
</t:div>
</f:subview>

The table is being displayed with clickable column headers. However, when I click on the column header the sorting does not work and I am getting a javascript error:
Message: 'elements' is null or not an object
Line: 982
Char: 3
Code: 0
URI: http://localhost:10040/wps/myportal/!ut/p/c5/dY7LCoMwFEQ_6V41NOnSFxpIjFFr1Y0IfaCtj4UI9evb2lUXziwPcxio4NOhWdp7M7fj0DyhgOpQx1pRcUwJKhYx5NJnxBDCwADhDAWSOu3YJF9zIVZ3ybpVo1y1JYWPsmsMGYXxJU9Oju0WVvj4bqo_K1JOkZseCUQebdaNu4EdEioQGXcJcuKoxPQVIrd-HHdiI0Th2F-hhIrufzcgg9KDqV8m_-bpNyotfmw!/dl3/d3/L0lDU0lKSmdwcGlRb0tVUm1abUEhL29Kb2dBRUlRaGpFQ1VJZ0FBQUl5RkFNaHdVaFM0SlJFQXdDR2lJQmdBREVRREFBV0lnR0FBY1JBTUFBQS80QzFiOVdfTnIwZ0NVZ3hFbVJDVXdnISEvN19QUU83TDlTNDBPOE44MElNRTg0MUxMMTBHMS9vY091UTY3ODMwMDEwLzE2MTcwNDk1MjM4MC9qYXZheC5zZXJ2bGV0LmluY2x1ZGUucGF0aF9pbmZvLyUwdmlldyUwQ1BETWFpbi5qc3A!/

Please tell me if anybody has done anything with sortable DataTable and faced this issue.

Thanks a lot for your help. Alex