I am using the built in sort function of primefaces on datatable. All working good except of one small issue, described in the 3 pictures below:
step 1:
step 2:
step 3:
In step 1, an ajax request updates entire datatable.
In step 2, the column header get clicked to sort by that column.
In step 3, an ajax request updates the entire datatable again, but the visual sort state of the column remains the old one.
I dont know if this is the intended behaviour. I created a jquery workaround: on the oncomplete method of the ajax button that makes the ajax call to update all datatable,
i removed the style classes that make them appear sorted.
workaround code:
Code: Select all
$(idSel + ' th.ui-state-active').removeClass('ui-state-active');
$(idSel + ' .ui-icon-triangle-1-n').removeClass('ui-icon-triangle-1-n');
$(idSel + ' .ui-icon-triangle-1-s').removeClass('ui-icon-triangle-1-s');
Code: Select all
<h:form id="consMunForm">
<div align="center">
<p:outputPanel id="consMunOutputPanel" layout="block" style="width:96%; text-align:left;">
<h:panelGrid columns="3" width="100%" columnClasses="cola, col2, colb" style="margin-bottom: 8px;">
<h:outputText value="Nome: " />
<h:inputText id="nmMunConsulta" value="#{undCad.v.nomeMunicipioConsulta}" style="width: 95%;" />
<p:outputPanel>
<input type="text" size="0" style="width:0px; height: 0px; border: none; padding: 0px; font-size: 0px" />
<p:spacer width="4px"/>
<p:commandButton value="Pesquisar" action="#{undCad.buscaMunicipio}" process="@this,nmMunConsulta" update="consultaMunicipioTable"/>
</p:outputPanel>
</h:panelGrid>
<p:dataTable id="consultaMunicipioTable" value="#{undCad.v.municipios}" var="mun"
style="width: 100%;" headerClass="esquerda" emptyMessage="Nenhum registro encontrado" >
<f:facet name="header">
<h:outputText value="Resultado da consulta" />
</f:facet>
<p:column sortBy="#{mun.nome}" >
<f:facet name="header">
<h:outputText value="Nome"/>
</f:facet>
<h:outputText value="#{mun.nome}"/>
</p:column>
<p:column sortBy="#{mun.uf.codigo}" style="text-align: center; width: 45px;">
<f:facet name="header">
<h:outputText value="UF"/>
</f:facet>
<h:outputText value="#{mun.uf.codigo}"/>
</p:column>
<p:column style="text-align: center; width: 65px;">
<f:facet name="header">
<h:outputText value=""/>
</f:facet>
<p:commandLink value="Selecionar" action="#{undCad.selecionaMunicipio(mun)}" update=":consMunForm:consMunOutputPanel :cadForm:municipioInput" />
</p:column>
</p:dataTable>
</p:outputPanel>
</div>
</h:form>
Regards,
Euclides.
Env: Primefaces 3.2 RC1 (reproduceable on 3.1.1 too), mojarra 2.1.7, tomcat 7.0.26, sun java 6