Problems sorting a richfaces datatable

I'm trying to get my richfaces datatable to have sortable headers. I've basically followed the code here: http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=dataTable&sample=tableSorting&skin=blueSky

My headers have links, and when I click them, you can see in the firebug console that a post request is happening. After it's done processing, nothing happens to the table.

Also, I have some jquery code that highlights a row when your mouse is hovered over it. Once you click one of the headers, the row highlighting doesn't happen anymore.

Here is my code.

<h:form>
    <rich:dataTable value="#{protocolDetail.details.protocolEvents}" var="detail" id="table" rows="20" rowClasses="odd, even" styleClass="stable">

        <rich:column sortBy="#{detail.date}">
            <f:facet name="header">
                <a4j:commandLink value="Date" render="table" action="#{protocolDetail.sortByDate}" />
            </f:facet>
            <f:facet name="footer">
                <a4j:commandLink value="Date" render="table" action="#{protocolDetail.sortByDate}" />
            </f:facet>
            <h:outputText value="#{detail.date}" />
        </rich:column>

        <rich:column sortBy="#{detail.description}">
            <f:facet name="header">
                <a4j:commandLink value="Description" render="table" action="#{protocolDetail.sortByDescription}" />
            </f:facet>
            <f:facet name="footer">
                <a4j:commandLink value="Description" render="table" action="#{protocolDetail.sortByDescription}" />
            </f:facet>
            <h:outputText value="#{detail.description}" />
        </rich:column>

        <rich:column sortBy="#{detail.comment}">
            <f:facet name="header">
                <a4j:commandLink value="Comment" render="table" action="#{protocolDetail.sortByComments}" />
            </f:facet>
            <f:facet name="footer">
                <a4j:commandLink value="Comment" render="table" action="#{protocolDetail.sortByComments}" />
            </f:facet>
            <h:outputText value="#{detail.comment}" />
        </rich:column>

    </rich:dataTable>



</h:form>
<rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active')" />
<rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active')" />

bean:

@ManagedBean(name = "protocolDetail")
@SessionScoped
public class ProtocolDetailBacker extends BaseObject {

    private String protocol = "";
    private int studyNumber;

    // private ArrayList<ProtocolDetailBean> details;
    private ProtocolDetailBean details = new ProtocolDetailBean();
    ProtocolDAO dao = new ProtocolDAO();
    private SortOrder dateOrder = SortOrder.UNSORTED;
    private SortOrder descriptionOrder = SortOrder.UNSORTED;
    private SortOrder commentsOrder = SortOrder.UNSORTED;

    public ProtocolDetailBacker() {
        FacesContext context = FacesContext.getCurrentInstance();
        String[] values = context.getExternalContext().getRequestParameterValuesMap().get("protocol");
        setProtocol(values[0]);
    }

    public String getProtocol() {
        return protocol;
    }

    public void setProtocol(String protocol) {
        this.protocol = protocol;
    }

    public ProtocolDetailBean getDetails() {

        try {
            studyNumber = dao.getStudyNumber(getProtocol());
            details.setProtocolNumber(getProtocol());
            details.setStudyChair(dao.getStudyChair(studyNumber));
            details.setShortDesc(dao.getShortDescription(studyNumber));
            details.setLongDesc(dao.getLongDescription(studyNumber));
            details.setPdc(dao.getPDC(studyNumber));
            details.setProtocolEvents(dao.getProtocolEventDetails(getProtocol()));
            System.out.println("");

        } catch (SQLException e) {

            e.printStackTrace();
        }

        return details;
    }

    public void setDetails(ProtocolDetailBean details) {
        this.details = details;
    }

    public int getStudyNumber() {
        return studyNumber;
    }

    public void setStudyNumber(int studyNumber) {
        this.studyNumber = studyNumber;
    }

    public SortOrder getDateOrder() {
        return dateOrder;
    }

    public void setDateOrder(SortOrder dateOrder) {
        this.dateOrder = dateOrder;
    }

    public SortOrder getDescriptionOrder() {
        return descriptionOrder;
    }

    public void setDescriptionOrder(SortOrder descriptionOrder) {
        this.descriptionOrder = descriptionOrder;
    }

    public SortOrder getCommentsOrder() {
        return commentsOrder;
    }

    public void setCommentsOrder(SortOrder commentsOrder) {
        this.commentsOrder = commentsOrder;
    }

    public void sortByDate() {
        descriptionOrder = SortOrder.UNSORTED;
        commentsOrder = SortOrder.UNSORTED;

        System.out.println("dateOrder = "+dateOrder);
        if(dateOrder.equals(SortOrder.ASCENDING)) {
            setDateOrder(SortOrder.DESCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else if(dateOrder.equals(SortOrder.DESCENDING)) {
            setDateOrder(SortOrder.ASCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else {
            setDateOrder(SortOrder.ASCENDING);
            System.out.println("else dateOrder now = "+dateOrder);
        }
    }

    public void sortByDescription() {
        dateOrder = SortOrder.UNSORTED;
        commentsOrder = SortOrder.UNSORTED;

        System.out.println("dateOrder = "+dateOrder);
        if(descriptionOrder.equals(SortOrder.ASCENDING)) {
            setDescriptionOrder(SortOrder.DESCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else if(descriptionOrder.equals(SortOrder.DESCENDING)) {
            setDescripti开发者_如何学JAVAonOrder(SortOrder.ASCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else {
            setDescriptionOrder(SortOrder.ASCENDING);
            System.out.println("else dateOrder now = "+dateOrder);
        }
    }

    public void sortByComments() {
        descriptionOrder = SortOrder.UNSORTED;
        commentsOrder = SortOrder.UNSORTED;

        System.out.println("dateOrder = "+dateOrder);
        if(commentsOrder.equals(SortOrder.ASCENDING)) {
            setCommentsOrder(SortOrder.DESCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else if(commentsOrder.equals(SortOrder.DESCENDING)) {
            setCommentsOrder(SortOrder.ASCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else {
            setCommentsOrder(SortOrder.ASCENDING);
            System.out.println("else dateOrder now = "+dateOrder);
        }
    }

}

Sorting your table recreates the rows. Therefor the onmouseover and onmouseout events are no more bound to your rows after sorting.

Luckily jQuery can handle this by creating a live handler. Live-Handlers will also trigger to rows, that are added after the execution of the jQuery-call.

The following works for me:

<rich:jQuery selector=".stable tr" query="live('mouseover mouseout', function(event) {
              if ( event.type == 'mouseover' ) {
                jQuery(this).addClass('active-row');
              } else {
                jQuery(this).removeClass('active-row');
              }});"/>

I too had the same problem was working with the sample code given in richfaces demo , still same issue

I added f:ajax to the a:commandlink now the sort is getting properly updated

<a4j:commandLink execute="@this" value="Vendor" 
render="carstable" action="#{carsSortingBean.sort}">
<f:param name="sortProperty" value="vendor" />
<f:ajax  render="carstable"  />
</a4j:commandLink>

In case anyone is still looking for this answer, If you're using RichFaces 4.0 and JSF 2, try setting JSF's partial state saving to true in your web.xml as seen below:

<context-param>
    <param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
    <param-value>true</param-value>
</context-param>