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

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"

  1. Apply a <thead> tag to any heading rows. You must have at least one.
  2. Add the following lines to the head section of your page, amending the path if necessary.
    <script type="text/javascript" src="sorttable.js"></script>
  3. 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;
    }
  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.

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.