How to sort a Column in a dataTable. JSF 2.0

Question

I'm building a WebApp in jsf 2.0 and it's about storing information and displaying it on the screen. so I've put in some "http://java.sun.com/jsf/html" dataTables to disply some lists. My Java code returns a List and then displays them on screen. but now I have to Sort the columns alphabetically. I believe there's no built in way of doing this, so i'm goign to have to look elsewhere for the task.

I came across This dataTables example, it's pretty awesome but I think I can't give it a List and display the list.

I also came across BalusC's way of incorporating the sorting intot he DataTbal, which is nice, I'm looking for this, but maybe with a jQuery IU.

Is there such an API that can meet my needs? can you point me in the right direction, or do you suggest one? I'd really want one that I just hand over the list in Java, but If I must, I can modify the data to comply with JSON format or some other...

Answer 1

With the native <h:dataTable> you have to do the sorting yourself in your managed bean. You could use existing JSF extension libraries that have them built in such as:

• MyFaces Tomahawk - docs
• ICEfaces - docs
• RichFaces - docs
• PrimeFaces - docs
• etc, way too many to state.

But if you don't want to use the above toolkits, then in your managed bean, you define your List and sort order (asc or dec). It can be as simple or complex you want.

Change the Ordering library to the SortOrder library, referencing this library: import org.richfaces.component.SortOrder;

The sort order comparator can be defined in a variable programmatically using the <rich:column> attribute:

private SortOrder sorting = SortOrder.unsorted; 

This is an example of using SortOrder programmatically using JSF 2.x/RichFaces 4.x. It uses a three-state sort method: unsorted (default), ascending, and descending, and implemented by setting the sortOrder attribute.

Or the comparator default behavior can be overridden in code, as in this example:

@ManagedBean(name="somebean")
@SessionScoped
public class OrderBean implements Serializable {
  private static final long serialVersionUID = ....;
  private List<Item> items;
  private boolean sortAscending;
  ...
}

In your view, you define the which headers you want to sort with, so add a commandLink to make each header clickable.

<h:dataTable value="#{somebean.items}" var="i">
  <h:column>
    <f:facet name="header">
       <h:commandLink action="#{somebean.sort}"> Sort Column</h:commandLink>
    </f:facet>
    #{i.name}
  </h:column>
</h:dataTable>

Now you have to implement the sort for your bean with basic collections, again, it can be as complex as you can:

private final Comparator NAME_SORT_ASC = new Comparator<Item>() {
    @Override
    public int compare(Item o1, Item o2) {
      return o1.getName().compareTo(o2.getName());
    }
  }
};

private final Comparator NAME_SORT_DESC = new Comparator<Item>() {
    @Override
    public int compare(Item o1, Item o2) {
      return o2.getName().compareTo(o1.getName());
    }
  }
};

public String sort() {
  Collections.sort(items, sortAscending ? NAME_SORT_ASC : NAME_SORT_DESC );
}

You can make your life easier by reusing stuff instead of doing that for each column, I will let you figure that out. You can use better libraries for Java to help you do the comparator for example with Guava from Google or Collection Commons from Apache.

Instead of doing all that, and reinventing the wheel, use a framework that abstracted all this out for you, they make your life way easier..

Answer 2

There are several component librarys on top of jsf-2.0.

Primefaces for instance has a very powerful datatable component with sorting / filtering options. Primefaces is very easy to integrate into your project and comes with a lot of themes (or you can create your own theme).

Just have a look at the showcase and the documentation.

Other popular component libraries are Richfaces (as per comment datatable sorting not supported) and Icefaces.

Answer 3

You can do it in Richfaces too. Richfaces 3.3.x supports easy sort:

<rich:column sortable="true" sortBy="#{res.retailerCode}">
    <f:facet name="header">
        <h:outputText value="#{msg.retailerId}" />
    </f:facet>
    <h:outputText value="#{res.retailerCode}" />
</rich:column>

In Richfaces 4.x you can sort datatable using Sorting bean:

<rich:column id="cardNumber" sortBy="#{res.instNumber}"
    sortOrder="#{cardholderSorting.cardNumberOrder}">
    <f:facet name="header">
        <a4j:commandLink value="#{msg.cardNumber}"
            action="#{cardholderSorting.sortByCardNumber}"
            render="cardholderTable" />
    </f:facet>
    <h:outputText value="#{res.cardNumber}" />
</rich:column>

or your DataModel (extends ExtendedDataModel):

<rich:column id="retailerCode" sortBy="#{rs.retailerCode}" sortOrder="ascending">
    <f:facet name="header">
        <h:commandLink value="#{msg.retailerId}" style="text-decoration: none; color:black;">
            <rich:componentControl target="retailerTable" operation="sort">
                <f:param name="column" value="retailerCode" />
                <f:param value="" />
                <f:param name="reset" value="true" />
            </rich:componentControl>
        </h:commandLink>
    </f:facet>
    <h:outputText value="#{rs.retailerCode}" />
</rich:column>

You can add arrows (for sorting order displaying) inside in command link and it will be exact same presentation as in Richfaces 3.3.3.

UPDATE

Starting from RichFaces 4.5 there is support of simple sorting in dataTable (like it was in version 3.3.x).