Creating a user-sortable table

To help ensure a satisfactory user experience, follow the procedure that is described here.

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 , 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>