display table - sortable column

I understand that in order to make a column sortable, you can assign it a 'sortable' attribute

    <display:column property="name" title="Name" sortable="true" />

However, can anyone tell me how to add an arrow (downward facing or upward facing) beside the column name.
ogeikemAsked:
Who is Participating?
 
boonlengCommented:
Just create different css style and set the headerClass to the style you want.

<style>
th.sortable a {
      text-decoration: none;
      background-position: right;
      background-repeat: no-repeat;
      display: block;
      width: 100%;
}
th.orderDown a {
      background-image: url(arrow_down.gif);
}
th.orderUp a {
      background-image: url(arrow_up.gif);
}
</style>


<display:column ... sortable="true" defaultorder="descending" headerClass="orderUp"/>
<display:column ... sortable="true" defaultorder="ascending" headerClass="orderDown"/>
0
 
boonlengCommented:
For sortable column, the column header use the css class "sortable".
Example:
<th class="sortable"><a href..</th>

You add the css style for the column header with image.
Example:
<style>
th.sortable a {
    background-image: url(/arrow.gif);
    background-position: right;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
}
</style>

If you have several sortable columns in the table, you can specify the header class to use different image.
<display:column ... sortable="true" headerClass="orderUp"/>

Regards,
Boon Leng
0
 
ogeikemAuthor Commented:
Thanks for your reply.

Can you help me with one thing.

I would like a downward facing arrow if the column is sorted in descending order and an or upward facing arrow if the column is sorted in ascending order.
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
boonlengCommented:
Just checked on displayTag example, found that actually no need to define the "headerClass". Just define the css style for order1 and order2. When displaytag perform sorting, it will use <th class="order1"> for ascending and <th class="order2"> for descending, the image will switch accordingly.

<style>
th.sortable a {
      text-decoration: none;
      background-position: right;
      background-repeat: no-repeat;
      display: block;
      width: 100%;
}
th.sortable a {
      background-image: url(arrow_off.gif);
}
th.order1 a {
      background-image: url(arrow_down.gif);
}
th.order2 a {
      background-image: url(arrow_up.gif);
}
</style>

<display:column ... sortable="true"/>
0
 
ogeikemAuthor Commented:
I got it working by adding this to my display.properties file

css.th.ascending=order1
css.th.descending=order2
0
 
boonlengCommented:
That is the default value, so you dont need to add to your display.properties :)
http://displaytag.sourceforge.net/11/configuration.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.