Row Sorting

This method principally describes using a script that displays an arrow on sorting but will not optionally display rows in alternate colours using Anton Peck's javascript (A method you may find when searching for this type of javascript). See the notes for a link to an alternative script that allows you to use an image instead of arrows.

Click on a column heading to sort in ascending / descending order.

Number	Title	Type
2501	Purchase Ledger	SOUR
2506	Sales Ledger	FS
2507	Procurement	TS
2511	Stock	SOUR
2512	Invoicing	DS

Notes about this method

This version of sorttable.js

• Uses a version of sorttable.js downloaded from www.kryogenix.org.
• Displays arrows to indicate the sort direction after clicking a column heading.
• Will not work with Anton Peck's alternate row colour method.
• Will work with tables created in RoboHelp as well as tables created using other editors. The table above was created using Dreamweaver 8.
• Works OK with topics that have dropdowns unless the dropdowns are in a table using this method. William van Weelden advises me that an alternative script that he found at http://yoast.com/articles/sortable-table/ can be used instead (it also allows you to use your own images instead of arrows).

How does it work?

1. Create your table in the normal way with all the formatting you require except do not use any background colours as they will be ignored.
2. Amend your table tag to include a class and an id so that it looks something like this

<table width="100%" class="sortable" id="table1">

Note the class has only one letter "t"

3. Apply a <thead> tag to any heading rows. You must have at least one.
4. Add the following lines to the head section of your page, amending the path if necessary.
   <script type="text/javascript" src="sorttable.js"></script>
   
5. Amend your style sheet as described on www.kryogenix.org
   To get the appearance you see here, my style sheet looks like this
   Table.sortable {
   border-collapse: collapse;
   border: 1px solid #32649b;
   }
   .sortable td{
   border: 1px solid #32649b;
   padding: 5px;
   }
   table.sortable a.sortheader {
   color:rgb(100, 150, 200);
   font-weight: bold;
   text-decoration: none;
   display: block;
   }
   table.sortable span.sortarrow {
   color: red;
   text-decoration: none;
   }
6. If you want the heading row(s) to have a different background colour, you need to apply it to the <td> tag for each cell in the heading row(s). If you apply it to the <tr> tag, it will get overwritten by the javascript.

Topic Revisions

Date	Changes to this page
19 May 2009	Note added re clash if a dropdown is placed in a table using this script. Introduction also amended.
15 Oct 2006	New topic.