Download "Unobtrusive sortable table" script


Put this into your <HEAD> section

Put this into your <BODY> section


Table syntax

This script is very easy to set up. First you create your table. Example:

<table id="myTable">
    <col id="col1_1"></col>
    <col id="col1_2"></col>
    <col id="col1_3"></col>
    <col id="col1_4"></col>
    <col id="col1_5"></col>
      <td>Managing director</td>
      <td>Head of production</td>
      <td>Head of marketing</td>

It's important that you give your table an "id"(example: <TABLE id="myTable">). The table should also have a <THEAD> and a <TBODY> tag. <THEAD> is used to identify the table header. The <TD> tags here are the ones you can click on to sort the table. The content of the <TBODY> tag is the sortable part of your table.

The <COLGROUP> is used to highlight the column you're table is sorted by. This is an effect you can add by adding css rules to the highlightedColumn class.

Initialize the script

A Javascript function "initSortTable" is used to make your table sortable. You call this function on a line below your HTML table. This function takes two arguments.

  • ID of table = The id of your table(example:"myTable" for <TABLE id="myTable">)
  • An array indicating how to sort your table. Possible values: "S" = String, "N" = Numeric, false = No sort)

This is an example of how this function can be called:

<script type="text/javascript">

Highlight current column

It's possible to add highlight effects to the column the table is sorted by. This is very simple. Just add some css effects to the css class "highlightedColumn",




Greater by simplicity.
Thank you.
pet at 09:14AM, 2011/06/25.
Elegant. I think it would be better with a sort direction icon at the right edge of the column head.
Dave at 01:00AM, 2013/05/29.
dont move the last row please!! my englis is bad
Manuel at 10:49PM, 2013/10/08.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2019