Row Sorting and Alternate Colour Rows

This method does not display any arrows on sorting. You can optionally also display rows in alternate colours or just use that option.

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.mingyi.org.
Does not display arrows to indicate the sort direction after clicking a column heading.
Will work with the Killer Stripes alternate row colour method which you can download here. You can also use the alternate row colours without the sorting 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?

If you want both sorting and alternate row colouring, follow the instructions in both sections. Otherwise follow just the section you want.

Sorting

Create your table in the normal way with all the formatting you require. Do not use any background colours for now if you also intend to use the Alternate Row Colouring method.
Amend your table tag to include the class that the sorttable javascript requires. It will look something like this

Note the class has only one letter "t"
The preserve_style attribute is required if you want to apply some formatting to your table cells.
When you have completed all the instructions in this section, test the sorting and you will soon see if this attribute is needed.
If you are going to use the alternate colour row method below, the attribute needs to read preserve_style="cell"..

Apply a <thead> tag to any heading rows. You must have at least one.
Add a <tbody> tag to all the other rows.
Add a <tfooter> tag to any footer rows. Like the header row(s). these will not be sorted.
Add the following line to the head section of your page, amending the path if necessary.
<script type="text/javascript" src="sorttable.js"></script>

That's it for the row sorting. Test it is working. There are more detailed instructions contained in the sorttable.js file. You do need any of the css stuff.

Alternate Row Colouring

I will describe how to set up one table in a topic first. Then I will cover the additional steps if you want this method to work on more than one table in the same topic..

Create your table in the normal way with all the formatting you require except do not use any background colours for now.
Amend your table tag to include the preserve_style attribute and an id so that it looks something like the line below.
Note that the Killer Stripes site will tell you to use the class "taglist", you can and must ignore that to make this method work with the sorttable.js file.
If you are not using row sorting, a class is not required or can be whatever you choose.

Note the class has only one letter "t"
The preserve_style attribute is required so that the alternate colouring of rows is retained when the rows are resorted. Using this method, you must use preserve_style="cell" (not "row") to retain the alternate colours after sorting.
The id can be whatever you want but must agree with the id defined in Step 4.

Add the following line to the head section of your page, amending the path if necessary.
<script type="text/javascript" src="killerZebraStripes.js"></script>
Locate the <body> tag in your page. You need to add an onLoad event that defines the even row colouring. It will look something like this
<body onLoad="stripeTables('table1','rgb(210, 220, 235)');">
The Killer Stripe instructions use the hexadecimal method of defining the colour. The choice is yours.
If there is an existing onLoad event, you need to add stripeTables('table1','rgb(210, 220, 235)') to it. For example, one of the other javascript methods on this site requires
<body onLoad="visibilitytoggle()">
To add a second onLoad attribute, amend the line as below
<body onLoad="visibilitytoggle();stripeTables('table1','rgb(210, 220, 235)')">
Now let's define the row colours. The even row colour is defined as in Step 4. To define the odd colour row, open the killerZebraStripes.js file and you will see where that is defined. Amend it as required.
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.
You do not need any of the CSS stuff that is described on the Killer Stripes site.

That's it. Test it is working.

If you used the earlier method of alternate row colouring that was described on my site, you will find the advantage of this method is that the alternate row colouring only applies to the tables you set up as above. The earlier method worked on all tables whether or not that is what you wanted.

If you want this method to work with more than one table in a topic, here are the additional instructions.

Give the second table a different id. You must do this even if you want the same colours. Each table using the method must have a unique id.
Amend the onLoad line to define the colour of the even row for the second table.This is what you need to add before the final closing bracket.
,'table2','rgb(100, 220, 235)'

Note that all tables will have the same odd row colour. Also note that odd and even rows apply to all tables with the sortable class in the same topic. So if the first table has and odd number of rows, the next table will start with what will be perceived as an even row and have that colour applied.

Topic Revisions

Date	Changes to this page
16 Oct 2006	Method of applying alternate row colouring changed. This method only operates on selected tables in a topic.
15 Oct 2006	New topic.