The SortableTable pattern

Giving a table the class "sortabletable", and each of its th’s a class which defines their data type, will make a table sortable.

The following files need including in the head of the document...

    <script src="../Include/ssSortableTable.js" type="text/javascript"></script>
    <link  href="../Include/ssSortableTable.css" type="text/css" rel="stylesheet"/>
          

The trs should be given the classes odd and even alternately.

The table should have a thead and tbody.

N.B. the first th is given the class "first" for style reasons.

The choice of data types is as follows

• Number
• CaseInsensitiveString
• Date
• ShortEnglishDate
• Currency
• String

Giving the td‘s for numbers and dates a class (Number, Date, ShortEnglishDate, or Currency) will align them to the right.

      <table id="mancitychelsea" class="sortabletable">

        <thead>

          <tr>
            <th class="CaseInsensitiveString first">Player</th>
            <th class="CaseInsensitiveString">Team</th>
            <th class="Number">Number</th>
            <th class="CaseInsensitiveString">Country</th>
          </tr>

        </thead>

        <tbody>

          <tr class="odd">
            <td>Nedum Onuoha</td>
            <td>Manchester City</td>
            <td class="Number">4</td>
            <td>England</td>
          </tr>

          <tr class="even">
            <td>Pablo Zabaleta</td>
            <td>Manchester City</td>
            <td class="Number">5</td>
            <td>Argentina</td>
          </tr>

          ...

          <tr class="odd">
            <td>Stephen Ireland</td>
            <td>Manchester City</td>
            <td class="Number">7</td>
            <td>Ireland</td>
          </tr>

        </tbody>
      </table>
          

• If you have more than one table in a page, make sure you give them unique IDs
• Note that the line ssAddLoadEvent(initialiseSortableTable); is run automatically in ssSortableTable.js. This looks for hyperlinks of class "sortabletable" and attaches this behaviour to them.
• It is possible to perform a sort manually by running ssSortableTable(), passing in the id of the table and the index of column to be sorted (0-indexed) as the parameters.

  
  ssSortableTable("mancitychelsea",0);