Nintendo Wii forums Forum for writers phpBB mods Essays on copyright Dating advice Narnia forums

Tony's Friendly Table Sorter

This is – I think – my first cup of awesomesauce, ever.  This code is beautiful.  I've had a lot of Open Source projects, yes.  But they were all done fast – in a weekend, when I could cram it in.  But this baby?  She's all curves.  Try clicking these table headers:

Title Version Publisher Money Created
Geeema 1.0.1 goop#5 $5 27 Feb 2008
Hello World! 1.0 tisad $5,000 21 Apr 2008
when? 1.0.3 illinois $5000.01 20 Feb 2008
en-us 1.0.1 #du $500.00 10 Apr 2008

Yeah. Want a cup? It's yours, for free.

The story

I needed some quick table sorting code that didn't rely on an SQL backend.  I found some promising Javascript code, but it was pretty broken.  It seemed like it could be repaired, and this is the result.

The players

The script that I latched onto was created by Joost de Valk.  His script is based upon another script, created by Stuart Langridge.  Because Stuart put his script out under an MIT license, Joost could expand Stuart's work, and I am able to expand Joost's work.  Thanks to Stuart for having the foresight to use the MIT license.

The features

This script contains all of the features of Joost's version (alternating colors for table rows, smart sorting based upon what it thinks the data is) along with the following improvements:

  1. Doesn't accidentally use the table header to try to determine the sort type.
  2. Space is allowed as separator between date fields.
  3. Created a "sort type override" feature.
  4. Replaced broken arrow images with arrow glyph from standard font.
  5. Refactored into a namespace so that there are no name collisions.
  6. Better handling of US vs. non-US number formats.
  7. Better handling of currency.
  8. Faster trim function (imperceptible).
  9. Cleaner sorting code (not faster, just neater).
  10. Consistent naming convention for functions/methods.
  11. Very clear comments to walk you through the code.

The new "Sort type override" feature

The sorting system can (rarely) make an incorrect guess as to how to sort a column.  For example, version numbers are usually sorted as numbers.  However, they are not actually numbers.  They have multiple decimal points, which is not possible in a real number.  Thus, you can see the sorting go wrong sometimes, and you need to override it.  To do this, see the "how-to" section below.

The Script

This is version 1.0, release June 4th, 2008.  It is available in a developer-friendly heavily commented version (14k), as well as a quick-downloading minimized version (7k).

The how-to

To get it working, download the minimized version, save it as a .js file (not .txt) onto your server, and then include this line in your HTML header:

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

You're not quite done.  You also need to flag each table that you'd like to be sorted.  You do this by adding the class "sortable" to the table(s).  Like this:

<table class="sortable">

That's typically enough to get things working.  But there is an optional step.  If you need to override the way it sorts a particular column, you can add a class to your table header (the TH tag).  It can be sortAlpha, sortNumeric, or sortDate.  Like this:

<th class="sortDate">

The License

My script is under an MIT license, just like Stuart's & Joost's scripts.  If you extend my script and release your version, you cannot remove the copyright, nor can you remove our names from the script.  But you CAN use this script for your own personal site or even for a company.  Just keep the copyright & link to the license intact.


« How to tell if a Bondi iMac is Rev. A or Rev. B | Main | I'm Voting Republican! »

Nav by tag: javascript
Main | Updated my Greasemonkey script for »
Nav by tag: tech
« How to tell if a Bondi iMac is Rev. A or Rev. B | Main | The Blog Mod, version 1.0 (finally!) »
Bookmark It! Technorati Netvouz DZone ThisNext Wists blinkbits BlinkList blogmarks blogtercimlap Blue Dot Bumpzee co.mments connotea DotNetKicks Fark feedmelinks Fleck Furl Gwar Haohao Hemidemi IndiaGram IndianPad Internetmedia LinkaGoGo Linkter Ma.gnolia MyShare Netscape NewsVine PlugIM PopCurrent ppnow RawSugar Reddit Shadows Simpy Slashdot Smarking Spurl Webride YahooMyWeb

TrackBack URL for this entry:

Comments (18)
Candy writes:

Super jazzed about getting that knowh-ow.

Just the type of insight we need to fire up the debate.

share writes:

Got it! Thanks a lot again for helping me out!

Great hammer of Thor, that is powerfully helpful!

Heck yeah this is exactly what I needed.

A bit surprised it seems to simple and yet useful.

YMMD with that answer! TX

If time is money you've made me a wealthier woman.

link writes:

Never seen a better post! ICOCBW

You couldn't pay me to ignore these posts!

sildenafil writes:

Great article but it didn't have everything-I didn't find the kitchen sink!

You Sir/Madam are the enemy of confusion everywhere!

Thanks for sharing. Your post is a useful contribution.

Great insight. Relieved I'm on the same side as you.

cheap writes:


buy writes:


cialis_online writes:


viagra_price writes:


Post a comment

Verification (needed to reduce spam):