• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • Last Modified:

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.
0
ogeikem
Asked:
ogeikem
  • 4
  • 2
1 Solution
 
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now