Home / Free JavaScripts / Other / Here

Description: This is a versatile plug and play sort table script that can be applied to any table on your page. It supports the following unique features:

• alternating row classes
• the possibility for making a row unsortable by giving it the class unsortable;
• default sort icons, showing on all headings of sortable rows.

Example:

Directions: Simply download "sortabletable.zip", and refer to the html page inside.

As mentioned, this script works seamlessly with existing tables on your page. A quick overview of installing this script is shown below:

Insert the following code in the HEAD section of your page:

<script type="text/javascript" src="sortable.js"></script>

Then, for the table you wish the sort, insert a "class" and "id" attribute inside its <table> tag:

<table class="sortable" id="anyid">
<tr>
  <th>Numbers</th>
  <th>Alphabet</th>
  <th>Dates</th>
  <th>Currency</th>
  <th class="unsortable">Unsortable</th>
</tr>
<tr>
  <td>1</td>
  <td>Z</td>
  <td>01-01-2006</td>
  <td>&euro; 5.00</td>
  <td>Unsortable</td>	
</tr>
<tr>
  <td>2</td>
  <td>y</td>
  <td>04-13-2005</td>
  <td>&euro; 6.70</td>
  <td>Unsortable</td>	
</tr>
<tr>
  <td>3</td>
  <td>X</td>
  <td>08-17-2006</td>
  <td>&euro; 6.50</td>
  <td>Unsortable</td>	
</tr>
<tr>
  <td>4</td>
  <td>w</td>
  <td>01-01-2005</td>
  <td>&euro; 4.20</td>
  <td>Unsortable</td>	
</tr>
<tr>
  <td>5</td>
  <td>V</td>
  <td>05-12-2006</td>
  <td>&euro; 7.15</td>
  <td>Unsortable</td>	
</tr>
<tr class="sortbottom">
  <td>15</td>
  <td></td>
  <td></td>
  <td>&euro; 29.55</td>
  <td></td>	
</tr>
</table>

The class sortable is obligatory, as well as adding a unique id to each table.
Options:

• By adding a class sortbottom to a row, this row wil be inserted last in your table, this is very useful for totals.
• By adding a class unsortable to a cell in the first row, this row will be made unsortable.

You can use this script to sort multiple tables on one page (that's also the reason why the table needs an id).