Adding Graphic Sort Indicators

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 outputStartoparam:

  1. As you render the column heading for the current column, retrieve the sort position and sort direction for the column and set sortPosition and sortDirection, respectively, equal to their values.

  2. Using the information obtained in step 1, check if the sortPosition of the current column is 1. A sortPosition 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.

  3. 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"/>&nbsp[+]
                   </dsp:oparam>

                   <dsp:oparam name="descending">
                      <dsp:valueof param="columnHeading"/>&nbsp[-]
                   </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>
 
loading table of contents...