Creating a user-sortable table

About this task

In any table, a user can click a column heading to sort the results. If a user clicks the same column heading again the results will sort in reverse order.

Table sorting does not create a new call to the API, it sorts the data that is displayed in the selected column.

To create a user-sortable table:

Procedure

  1. Use table.htc in the style attribute for the table. If you are using the default CSS files of Sterling Selling and Fulfillment Foundation, you can use class=“table” for the <table> tag.
  2. The table should have <tbody> and <thead> tags that include <td> tags. If you specify sortable=“no” for any <td> tag in the <thead> tag, the column is not sortable.
  3. For Date and Number, provide a separate sortValue=“<nonlocalized_value>” in the actual <tbody> tag so that the data sorts properly.

    This example shows the tags needed for creating a user-sortable table:

    <table class="table" editable="false" width="100%" cellspacing="0">
    	<thead>
    		<tr>
    			<td sortable="no" class="checkboxheader">
    				 <input type="hidden" name="userHasOverridePermissions"
    value='<%=userHasOverridePermissions()%>'/>
    					<input type="hidden" name="xml:/Order/@Override" value="N"/>
    					<input type="checkbox" name="checkbox" value="checkbox"
    onclick="doCheckAll(this);"/>
       </td>
       <td class="tablecolumnheader"><yfc:i18n>Order_#</yfc:i18n></td>
       <td class="tablecolumnheader"><yfc:i18n>Enterprise</yfc:i18n></td>
       <td class="tablecolumnheader"><yfc:i18n>Buyer</yfc:i18n></td>
       <td class="tablecolumnheader"><yfc:i18n>Order_Date</yfc:i18n></td>
      </tr>
     </thead>
     <tbody>
         <yfc:loopXML binding="xml:/OrderList/@Order" id="Order"> 
            <tr>
              <yfc:makeXMLInput name="orderKey">
                   <yfc:makeXMLKey binding="xml:/Order/@OrderHeaderKey"
    value="xml:/Order/@OrderHeaderKey" />
              </yfc:makeXMLInput>                
              <td class="checkboxcolumn">                   
                 <input type="checkbox" value='<%=getParameter("orderKey")%>' 										name="EntityKey"/>
              </td>
              <td class="tablecolumn">
                 <a href="javascript:showDetailFor
    ('<%=getParameter("orderKey")%>');">
                 <yfc:getXMLValue binding="xml:/Order/@OrderNo"/></a>
               </td>
               <td class="tablecolumn">
                 <yfc:getXMLValue binding="xml:/Order/@EnterpriseCode"/>
               </td>
               <td class="tablecolumn">
                 <yfc:getXMLValue binding="xml:/Order/@BuyerOrganizationCode"/>
                </td>
                <td class="tablecolumn" 
    SortValue="<%=getDateValue("xml:/Order/@OrderDate")%>">
                  <yfc:getXMLValue binding="xml:/Order/@OrderDate"/>
                </td>
            </tr>
         </yfc:loopXML>
    	</tbody> 
    </table>