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

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

  1. 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.
  2. Amend your table tag to include the class that the sorttable javascript requires. It will look something like this

<table width="100%" class="sortable" preserve_style="row">

  1. Apply a <thead> tag to any heading rows. You must have at least one.
  2. Add a <tbody> tag to all the other rows.
  3. Add a <tfooter> tag to any footer rows. Like the header row(s). these will not be sorted.
  4. 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..

  1. Create your table in the normal way with all the formatting you require except do not use any background colours for now.
  2. 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.

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

  1. Add the following line to the head section of your page, amending the path if necessary.
    <script type="text/javascript" src="killerZebraStripes.js"></script>
  2. 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)')">
  3. 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.
  4. 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.
  5. 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.

  1. 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.
  2. 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.