AllMyScripts logo - first part
Mortgage Calculator | Loan Calculator | Color Lines
AllMyScripts logo - second part
AllMyScripts logo - third part

Javascript Table Sorting


Features | Example | How to use it | Advanced features | Changes | Download | License

Features:

For one of my projects I wrote simple javascript code that sorts table data. At some point I wanted to use the code for another website, so I've made it generic enough to suit different websites. Eventually I released the code under GPL. Since then I've made several enhancements to the code, and now the table sorting script has the following features:

Example:

Current sorting order of the second table is stored in a cookie. If you refresh the page the table will have exactly the same sorting order as it had before refreshing. Also, the second table has custom sorting up/down characters.

City NameCity Information
Area (km2)Population (millions)
Mumbai44012.78
Karachi353012.21
Delhi140011.06
San Paulo152010.84
Moscow108110.38

US CityStatePopulation (millions)
New YorkNew York8,274,527
Los AngelesCalifornia3,834,340
ChicagoIllinois2,836,658
HoustonTexas2,208,180
PhoenixArizona1,552,259

How to use it:

  1. Please download a file gs_sortable.js (see links below) - this is the only external javascript file that you will need. Put it somewhere on your web server. Do not link to original file on this server because:
  2. Add id="some_name" to the table that you want to sort:
    <table id="my_table">
    ... more HTML data ...
    "some_name" id should be unique (it's an HTML requirement).
  3. Put "<thead>" and "</thead>" tags around the table row that contains column names, like this:
    <table id="my_table">
    <thead>
    <tr><th>Name</th><th>Year</th></tr>
    </thead>
    ... table data ...
    </table>
    You don't necessarily need to use TH tags for that row - TD will work too.
  4. Add javascript code to your page:
    <script type="text/javascript" src="/gs_sortable.js"></script>
    <script type="text/javascript">
    <!--
    var TSort_Data = new Array ('my_table', 's', 'i', 'f');
    tsRegister();
    // -->
    </script>
    "tsRegister();" is optional if you want the script to handle only one table on the page, and required if you want to add column sorting to more than one table. The part that you need to change in this code is located inside of Array parenthesis. The first parameter in array ("my_table" in the example above) should match id of the table. All other parameters specify type of data in table columns - the second parameter specifies type of data in the first column, the third parameter specifies type of data in the second column, and so on. "Type of data" parameters can be set to:

    'i' - Column contains integer data. If the column data contains a number followed by text then the text will ignored. For example, "54note" will be interpreted as "54".

    'n' - Column contains integer number in which all three-digit groups are optionally separated from each other by commas. For example, column data "100,000,000" is treated as "100000000" when type of data is set to 'n', or as "100" when type of data is set to 'i'.

    'f' - Column contains floating point numbers in the form ###.###.

    'g' - Column contains floating point numbers in the form ###.###. Three-digit groups in the floating-point number may be separated from each other by commas. For example, column data "65,432.1" is treated as "65432.1" when type of data is set to 'g', or as "65" when type of data is set to 'f'.

    'h' - column contains HTML code. The script will strip all HTML code before sorting the data.

    's' - column contains plain text data.

    'c' - column contains dollar amount, prefixed by '$' character. The amount may contain commas, separating three-digit groups, like this: $1,234,567.89

    'd' - column contains a date.

    '' - do not sort the column.

    It is important to note that all data types, except 's' and '', strip all HTML code from data columns before sorting.

    As an example of sortable table with different data types, let's pretend that you want to show recent sales of some equipment, and include equipment name, sale date, sale price and the number of units sold. If you want to sort all columns in this table, then the data type for the first column will be 's' (string) or 'h' (HTML code), the second column will have 'd' (date) data type, the third column will have 'c' (currency) data type, and the last column should be set to data type 'i' (integer) or 'n' (a number). Assuming that the table has "sortable_table" id, the javascript code will look like this:

    <script type="text/javascript">
    <!--
    var TSort_Data = new Array ('sortable_table', 's', 'd', 'c', 'i');
    tsRegister();
    // -->
    </script>

    Below is an example of the table, that uses javascript code above:

    ProductDatePrice per unitUnits sold
    Item A13/5/2012$25.1520
    Item B14/5/2012$351
    Item A14/5/2012$281
    Item C15/5/2012$20100

  5. If you want to add table sort feature to more than one table on the page then repeat steps 2, 3 and 4 for each table. Make sure that javascript code in the step 4 includes "tsRegister();" statement for each table. If you specify any advanced additional parameters (see "Advanced Features" section below for more information) then you don't need to reset them after each call to the tsRegister function - the function does it automatically.

That's it. The javascript code was tested in the latest versions of IE6, Firefox, Chrome and Opera browsers.

Advanced Features

Changes from version 1.8

Some of the changes and fixes were submitted by Vilem Marsik and Andrey Elistratov. Thank you!

Version 1.9 of the script is backwards compatible with older versions of the script. Replacing old versions of the script with the version 1.9 should not require any changes to HTML pages.

Changes from version 1.7

The script can handle US currency in the form $XXX.XX.

Tables without rows no longer result in javascript error. This change incorporates fix supplied by David Sacker.

Version 1.8 of the script is backwards compatible with older versions of the script. Replacing old versions of the script with the version 1.8 doesn't require any changes to HTML pages.

Changes from version 1.6

The script now handles dates in the following formats: <year>-<month>-<day> and <year>-<month>-<day> <hours>:<minutes>:<seconds>.

Version 1.7 of the script is backwards compatible with older versions of the script. Replacing old versions of the script with the version 1.7 doesn't require any changes to HTML pages.

Changes from version 1.5

The script now properly handles tables that have two header rows. For an example please see the first demo table on this page.

Version 1.6 of the script is backwards compatible with older versions of the script. Replacing old versions of the script with the version 1.6 doesn't require any changes to HTML pages.

Changes from version 1.4

The script can now sort integer and floating-point data where three-digit groups are separated by commas ('n' and 'g' data type parameters).

Version 1.5 of the script is compatible with older versions of the script. You can replace old version of the script with the version 1.5 without changing your HTML pages.

Changes from version 1.3

Version 1.4 of the script is compatible with older versions of the script. You can replace old version of the script with the version 1.4 without changing your HTML pages.

Changes from version 1.2

Version 1.3 of the script is compatible with older versions of the script. You can replace old version of the script with the version 1.3 without changing your HTML pages.

Changes from version 1.1

You can specify initial sorting order of the columns in the version 1.2.

Version 1.2 of the script is directly compatible with versions 1.1 and 1.0. You can replace old version of the script with the new version without changing your HTML pages. You will need to make a small change in HTML pages if you want to add support for setting initial sorting order.

Changes from version 1.0

Version 1.1 of the script is directly compatible with version 1.0. You can replace old version of the script with the new version without changing your HTML pages. You will need to make a small change in HTML pages if you want to add support for table zebra striping.

Download:

gs_sortable.js v1.9 (beta version) - uncompressed file
gs_sortable.js v1.8 (latest stable version) - uncompressed file
gs_sortable.js v1.7 - uncompressed file
gs_sortable.js v1.6 - uncompressed file
gs_sortable.js v1.5 - uncompressed file
gs_sortable.js v1.4 - uncompressed file
gs_sortable.js v1.3 - uncompressed file
gs_sortable.js v1.2 - uncompressed file

Future enhancements:

None planned.

License:

The script is released under GPL v3.0 license. You're welcome to distribute the script and to use it on your web pages if you like. If you decide to modify it please make sure that you release the changed code.

Contact

If you have any questions, corrections or additions to the code, you can contact me using this form.

Spread the word:

If you use this script and like it please consider adding a link to this page. This will make it easier for other people to find this script. And the more people use the script the more I'll be inclined to improve it.

(c) Copyright 2007 - 2009 Gennadiy Shvets