Row Sorting with Arrows

This method displays an arrow on sorting but will not optionally display rows in alternate colours using Anton Peck's javascript.

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

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.

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