To enhance the usability of a sortable table, you can provide visual cues that indicate which column is the current primary sort column for the table.
The following code example identifies and displays the column heading of the primary sort column followed by [+], [-], or no indicator, depending on the current sort direction for the column (ascending, descending, or none, respectively). To add this kind of graphic indicator, make the following modifications to the outputStart
oparam
:
As you render the column heading for the current column, retrieve the sort position and sort direction for the column and set
sortPosition
andsortDirection
, respectively, equal to their values.Using the information obtained in step 1, check if the
sortPosition
of the current column is 1. AsortPosition
of 1 indicates the column is the primary sort column in the table. Display only the column heading if it is not the primary sort column.If the current column is the primary sort column, use the Switch servlet bean to display the column heading followed by the graphic indicator appropriate for the column’s current
sortDirection
.
The following JSP code shows to add graphic sort indicators to the column headings:
<dsp:oparam name="outputStart"> <TABLE border=1 cellspacing=2 cellpadding=2> <TR> <dsp:droplet name="ForEach"> <dsp:param bean="TableInfo.tableColumns" name="array"/> <dsp:param name="sortProperties" value=""/> <dsp:oparam name="output"> <dsp:setvalue paramvalue="element.heading" param="columnHeading"/> <dsp:setvalue paramvalue="element.sortPosition" param="sortPosition"/> <dsp:setvalue paramvalue="element.sortDirection" param="sortDirection"/> <TD align="center"> <dsp:a href="table.jsp"> <dsp:param name="sortColumn" param="index"/> <dsp:droplet name="Switch"> <dsp:param name="value" param="sortPosition"/> <dsp:oparam name="1"> <dsp:droplet name="Switch"> <dsp:param name="value" param="sortDirection"/> <dsp:oparam name="ascending"> <dsp:valueof param="columnHeading"/> [+] </dsp:oparam> <dsp:oparam name="descending"> <dsp:valueof param="columnHeading"/> [-] </dsp:oparam> <dsp:oparam name="none"> <dsp:valueof param="columnHeading"/> </dsp:oparam> </dsp:droplet> </dsp:oparam> <dsp:oparam name="default"> <dsp:valueof param="columnHeading"/> </dsp:oparam> </dsp:droplet> </dsp:a> </TD> </dsp:oparam> </dsp:droplet> </TR> </dsp:oparam>