Standardista Table Sorting (A client-side JavaScript Table Sort module)

Posted by Neil Crosby on February 26, 2006 03:15 PM

Standardista Table Sorting is a JavaScript module that lets you sort an HTML data table by any column. The module has the following advantages:

It works. The codebase has been tested across a large number of web browsers, and in the few that won’t allow the sorting to occur, the module degrades gracefully. In these cases the original table is not altered in any way, shape or form.
It’s unobtrusive. You add a reference to the Standardista Table Sorting JavaScript files in the head of your webpage, add a class of “sortable” to the tables in your page that should be sorted and you’re done.
It’s fast. Sorting a column in an eight column, one hundred row, table takes on average between 100 and 200 milliSeconds in my testing. That’s just a tenth of a second for a bigger table than you’re often likely to put on a webpage.
It knows about different data types. The current version of Standardista Table Sorting will sort IP Addresses, Currency, Number, Plain Text and Dates, and the best bit is it works out what type of sorting to do without you having to tell it. If you know a small amount of JavaScript it’s also trivial to add new data types to sort by.

Download Standardista Table Sorting now.

How to use Standardista Table Sorting

First, download the Standardista Table Sorting module.

Include the .js files in the HEAD of your webpage:

<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='css.js'></script>
<script type='text/javascript' src='standardista-table-sorting.js'></script>

Make sure that the table you want to be sortable has a THEAD and a TBODY.
Give the table that wants to be able to be sorted the class “sortable”.
Load the page, and you’ll be able to sort the table by clicking on its headers!

Extended Pointers for using Standardista Table Sorting

Every table that you want users to be able to sort must contain a THEAD and a TBODY section. If you’re using tables for displaying data, this is just good practice anyway. If you aren’t, then it’s not a huge hardship to wrap your heading row in a THEAD and your data rows in a TBODY, is it?
If you have more than one row in your THEAD then the last row will be the one that receives the links which the user can use to sort the table.
If you want to leave a row (or more) of data sitting statically at the bottom of the table, then put it in a TFOOT section. Remember, the TFOOT should come between the THEAD and the TBODY in your HTML source.

An Example Table to Sort

Date	Fore	Surname	Price	IP Address
	Name
			$160.91
21/01/2006	Neil	Crosby	$1.96	192.168.1.1
01/02/2006	Becca	Courtley	$23.95	192.167.2.1
17/11/2004	David	Freidman-Jones	$14.00	192.168.2.1
17/10/2004	Annabel	Tyler	$104.00	192.168.2.17
17/11/2005	Carl	Conway	$17.00	192.168.02.13

Goals for my Table Sorting script

The following are the goals I set myself whilst I was writing the Standardista Table Sorting module.

Must be absolutely unobtrusive. All the user should have to do to make a table sortable is add a single class to it.
Must be able to deal with large tables quickly.
Must know about the extended table model.
Must degrade gracefully in older web browsers.
Must not throw up any warnings with “Report Strict Warnings” turned on in Firefox’s Error Console. (Reduces the possibility of things going wrong in other browsers).
Likewise, must not cause Venkman to stop and complain when “Stop for Errors” is turned on.

Basically, I wanted a bulletproof table sorting script that would degrade gracefully in older browsers. As it turns out, this was not too difficult.

What’s in the three JavaScript files?

All three JavaScript files contain functions which are necessary for running Standardista Table Sorting. Let’s quickly run through each file in turn…

standardista-table-sorting.js

This is the big meaty file which contains the code that does the actual sorting. There’s not really much that you need to know about this - just that you need to include it in your page if you’d like your users to be able to sort tables.

common.js

If you’re already doing things with JavaScript on your site, I’d be surprised if you weren’t already using some or all of the three functions used here. The following methods are used by Standardista Table Sorting:

addEvent(). I use Dean Edward’s addEvent() method, since his version will allow you to return false to cancel the normal action of events. However, the use of Dean’s version is not necessary for the running of Standardista Table Sorting - addEvent() is only used for the initial loading of the module.
getEventTarget(). This came from ppk’s Events Properties page at Quirks Mode, and returns the element that the event was fired on.
createElement() - I use Simon Willison’s createElement() method since it ensures that if you’re doing the “Serving XHTML as application/xhtml+xml” thing you won’t have your scripts die on you.

css.js

This supporting file contains a bunch of methods that I like to use for accessing CSS class names from JavaScript. I use them in a lot of the work I do, so they’re in a separate file.

Where does Standardista Table Sorting come from?

My first thoughts about writing a table sorting JavaScript module came in early February 2005, when I saw Stuart Langridge’s “sorttable” code linked at del.icio.us. At the time I was very impressed, but noted that it didn’t work correctly in Safari, and that Mac IE displayed a nasty error message when you tried to view a page which used it. I del.icio.us’ed the site though and set myself the challenge of rewriting the code so that it would work in every browser I could throw it at.

A year later I came back to the idea of Table Sorting when a project I was working on needed some tables to be sorted by the user. Going back to Stuart’s site showed that the code hadn’t been updated in the previous 12 months and the browser issues I’d noticed back then still existed. Investigating the sorttable code further showed that various other issues also existed. The major problem for me, apart from the lack of browser support, was that there was no support for THEAD, TBODY or TFOOT elements at all. THEADs were ignored, instead just taking the first row in the table (no matter what it was) as the row that should be used to create links that did the sorting. Likewise, instead of using a TFOOT as the immovable base element, you had to give your footer row a class of ‘sortbottom’. Unfortunately, giving a row in your TFOOT the class ‘sortbottom’ took it out of the TFOOT and placed it at the bottom of your TBODY when the table was sorted. Whoops. Another minor annoyance was that when you did click on a link to sort the table you would be transported back up to the top of the page you were on, since the each link pointed to ‘#’ and the javascript controlling it didn’t return false when it was done.

All these issues were fairly minor annoyances but they were things that would absolutely have to be addressed before I deployed anything which made use of the code. I decided to perform a major reworking of Stuart’s original code, keeping the portions which worked now as they did then (specifically most of the comparison methods), and rewriting the rest.

What browsers does Standardista Table Sorting work in?

The following is a list of web browsers that the original version of Standardista Table Sorting was verified to work in:

Camino 1.0
Firefox 1.0.6 Mac
Firefox 1.0.7 Win
Firefox 1.5.0.1 Mac
Firefox 1.5.0.1 Win
Internet Explorer 5.2 Mac (degrades gracefully, showing the original unaltered table)
Internet Explorer 6 Win
Internet Explorer 7 Beta 2 Preview Win
Opera 8.52 Win
Safari 1.3.2

Further, Table Related, Reading

Seven reasons why you should not use tables to layout webpages
Bring on the tables - Roger Johansson goes into great depth explaining how to use tables for displaying data. A must read, especially if you’ve not done anything using tables for a while.
CSS Table Gallery - One table, many styles. Chris Heilmann’s site that showcases the sorts of things that can be done with CSS to data tables.

Feature Requests? Bugs?

If you have an idea for something to be included in a later version of Standardista Table Sorting, please leave a feature request at the Standardista Table Sorting SourceForge pages. Likewise, if you find something wrong, please fill in a bug report.

If you enjoyed reading this and would like other people to read it as well, please add it to del.icio.us, digg or furl.

If you really enjoyed what you just read, why not buy yourself something from Amazon? You get something nice for yourself, and I get a little bit of commission to pay for servers and the like. Everyone's a winner!

comments (232) | write a comment | permalink | View blog reactions

TrackBacks

Blogs that reference Standardista Table Sorting (A client-side JavaScript Table Sort module):

Sorting HTML Tables with JavaScript from Bogo's Blog on February 27, 2006 01:15 AM

[]
Sorting HTML Tables with CSS and Javascript from Man, programmer, law student on February 28, 2006 03:48 PM

This is too good to miss. []

Comments

by Manuel on February 26, 2006 07:06 PM

Hello,

broken on WinXP, Firefox 1.5.0.1

Line: 54
event.preventDefault = fixEvent.preventDefault; Message: “event has no properties”

Regards,

Manuel
by Manuel on February 26, 2006 07:09 PM

Ups, you can delete the previous entry. My fault, the firewall ;) It works! Cool script.

Manuel
by Neil Crosby on February 26, 2006 07:48 PM

You had me really worried there for a moment Manuel! Especially since It’s Firefox 1.5.0.1 for Win XP that I did the bulk of my development with!
by Mark van Eijk on February 26, 2006 09:51 PM

It works great Neil! I was always looking for such script which also can sort tables with linked text in it. Keep it up!
by rolandog on February 26, 2006 10:32 PM

Wow. Great, even suhweeeeet, script. I guess it’s better to use the international standard date notation… (YYYY-MM-DD).
by Marshall on February 27, 2006 03:25 AM

You’re a genius. Between the sorting and the CSS with every other row shaded differently, you saved my hours of frustration) beyond the hours I already put in. Thank you!!!
by Ivan Minic on February 27, 2006 04:17 AM

Seems to be working ok with opera :)
by Isaac Eiland-Hall on February 27, 2006 05:44 AM

Awesome. I was very anti-JS (all scripts, not just JS), but it’s things like this that slowly convert me, eating away at my protective shell… ;-)

Seriously, awesome script…
by LAslo on February 27, 2006 12:20 PM

Is there a lot of work to make sorting for more columns? So if I want to sort by one column it work ok but waht if I want to sort by another column but to kep the previous sorthing… OR holding shift or ctrl buton to select more columns…??? Thnks
by DavidK on February 27, 2006 02:40 PM

What’s with the very strange duplication of all cell values as properties of the table cells?

Ignoring that though… I quite like this, if you could just handle large volumes of data into paginatable or scrollable areas that would be ace :)

This is what I’ve been using to date: http://www.kryogenix.org/code/browser/sorttable/

Which works much the same way :)
by Neil Crosby on February 27, 2006 08:05 PM

rolandog - The good thing about YYYY-MM-DD formatted dates is that they don’t need any special sorting algorithm to sort in the correct order. The sort correctly just by using a standard sort!

Laslo - I’m going to have to have a think about that. I want to keep Standardista Table Sorting as quick as possible, and I’m worried that doing anything like that is going to slow things down horribly. It might be possible though.

DavidK - The duplication of cell values as attributes is something that was done to speed things up. If you have a cell that contains multiple elements, then the getInnerText() function has to iterate through all of those to get the full inner text of the cell. It’s a lot faster to store that final value in an attribute of the cell than to end up having to recalculate it every single time it is requested for a cell.
by Alpha0 on February 27, 2006 11:48 PM

I always need it. Thanks a lot. But if I have data which is being displayed page wise instead of in a single page. This sort may not be a solution. Isnt it?
by Brian McAllister on February 28, 2006 10:19 AM

Hi Neil,

I’ve a similar script available:

Unobtrusive Table Sort Script

It has pretty much identical functionality to your version (except that I haven’t integrated the “sort IP” option). Nice work B.T.W…
by DannyS on February 28, 2006 03:28 PM

It seems like you’re misusing tfoot here, to express a sum of a table column. In the case where the table spills over many pages, the sum would (could) be printed at the bottom of each one, which probably isn’t what you want.
by Ryan on February 28, 2006 05:07 PM

This is the coolest script I’ve ever seen. Seriously. And it also seems to work in Safari 2.0.3.
by Neil Crosby on February 28, 2006 07:19 PM

Brian McAllister - I like that your script can optionally have a sort algorithm forced upon any of its columns - it’s something I was considering doing for Standardista, but it sort of fell by the wayside for this first version. Good work with it :)

DannyS - I see where you’re coming from with this, but I’m not sure I completely agree that I’m misusing TFOOT. It’s one of those things that does seem fairy re-interpretable when you read the specifications, and I can’t find anywhere in the specs that says that it should not be used for summary/totalling information in this way. Of course, if I’m wrong (and I’m absolutely prepared to be) then let show me!
by nikola on March 1, 2006 08:46 PM

nice work ;-) …
by Rhett Brown on March 2, 2006 08:06 PM

Simply beautiful. Destined to become a standard JS tool everywhere.
by Matteo on March 9, 2006 08:05 AM

Hi, good works !! Two questions: Is it possibile to sort the table automatically ? Is it possible to sort the table after and another javascript event ?

Thanks in advance Cheers Matteo
by oneuser on March 10, 2006 05:12 PM

Very nice script - it definitely improved over Stuart Langridge’s code. It’s nice work.

What’s thrown me off was that you used a lot of his code but did not even give credit in your JS code. That’s almost like plagiarism!

One argument might be that you gave credit by citing him in your story, but 1. As a programmer, you know that’s not how you give credit. 2. You also said you “rewrote” the code “from scratch”, but that’s not the case. Your code was using the same comments (sometimes same variable names) in a big portion of the code. Specificly, the sorting algorithm was entirely lifted from Stuart Langridge’s code (except for the addition of ip comparing function).

I think a decent thing for you to do is that you put Stuart’s name in your code and say that your code, particularly the sorting part, is based on his. You certainly wouldn’t want your code be used without your name there right (judging from the comment at top of your code)?
by Neil Crosby on March 10, 2006 07:55 PM

oneuser: You’re absolutely right, I should give credit to Stuart Langridge in the JavaScript itself, as the code was based on his original development. This was an oversight on my part, so thank you for mentioning it. As soon as I’ve finished writing this comment I’m going to do just that.

Yes, three of the comparison methods which allow the sorting to take place are directly lifted from Stuart’s work - this is because they worked. I’ve ammended the relevant portion of the article to take this into account as clearly I pushed my input a mite too strongly.

The code which did the sorting in Stuart Langridge’s original effort was great, there was no need to improve on it, so it mostly got used. Where there was a need to change things was purely on the browser side - making sure that properly tgrouped tables were parsed correctly and that graceful degradation occurred in less capable web browsers. So these are the things that I rewrote.

Thankyou for your comment. It is good to get feedback like this, and I do greatly appreciate it.
by Alagami on March 12, 2006 11:52 PM

Great code dude ;-)

One problem though. What if i want to rule out one or more TH so that they cannot be sorted upon?
by ketsugi on March 13, 2006 11:49 AM

How does the algo handle column with only tags in them? It doesn’t seem to group the same images together as I’d expect it to.
by Artimus the Just on March 15, 2006 01:40 AM

Nice code. Possible extension would be to add the ability to sort scientific notation (2E-1 should come before 1E-2).
by Mingyi on March 18, 2006 05:44 AM

Possible extension would be to add the ability to sort scientific notation (2E-1 should come before 1E-2)

My script (http://hotscripts.com/Detailed/57817.html) on hotscripts.com already does that and has some other interesting features. Check it out if you’re interested.
by Julien on March 21, 2006 04:24 PM

Thank you for the quality of your module!

What exactly in your script makes it degrade gracefully for IE/Mac? The only detection I see is document.getElementsByTagName.
by Neil Crosby on March 21, 2006 07:16 PM

Julien - The graceful degradation in IE/Mac is a symptom of IE/Mac not being supported by the addEvent method that Standardista Table Sorting currently uses.

Since the addEvent isn’t the only thing in STS which would flummox IE/Mac, I should really add an explicit check for IE/Mac in STS itself to cover the possible case of someone using an addEvent method with STS which doesn’t upset IE/Mac. I’ll add it to the list of things to do.
by Saki D. on March 23, 2006 02:51 PM

Brilliant! I was looking after this kind of functions for my website. Thanks a lot!

One request: When you sort the table by names, the dates are unfortunately in disorder for the same names, whereas they could be also ordered. And each time it is a different order. You can see it too for Brian MacAllister script (http://www.frequency-decoder.com/demo/table-sort/). Click on the distributor column and you’ll see the dates in disorder. Click twice again and you’ll see another disordering.

Saki - From Belgium, so please excuse my terrible english! ;)
by Doug on March 23, 2006 10:29 PM

Terrific script … and the sort is fast!!! Another sort script I was using was easily 20 times slower. It seems that there is a conflict when the “body” tag in my script has an “onload” event. Can you give me a hint as to how to prevent the conflict. I am relatively new to JavaScript, so may be missing something. Thanks.
by Neil Crosby on March 24, 2006 08:57 AM

Doug: Thanks!

I’m guessing the conflict you’re talking about is that when you have an “onload” event, the Standardista Table Sorting script doesn’t run? The reason for this is that you can only set an “on” event once. If you then try and set the same event on the same element again then the previously set event (including those created using an addEvent variant) will be wiped out.

The way to still use an “onload” in your page as well as using Standardista Table Sorting is to simply call addEvent(window, 'load', someFunction); instead of using <body onload='someFunction()'>.

The benefit of using an addEvent variant is that more than one handler for the same event is able to be set on a single element. A version of addEvent is included with Standardista Table Sorting, so you’re good to go.

I will add some information about this to the readme on the next update of Standardista Table Sorting.
by Doug on March 27, 2006 08:57 PM

Comment #22. I have attempted to prevent sorting from occurring on a particular column by giving the corresponding ‘th’ a class. But I have been unable to successfully stop the sort on the specified column without stopping the sort on all columns. Can you recommend a solution? Thanks.
by Jay Hills on March 30, 2006 11:32 AM

I’m having some problems making the table “sort” when the page loads. I want the table column with, say, names to sort itself alphabetically when you look at the page initially, not only when you click.

How would I do this?
by Peter on March 31, 2006 02:00 AM

Thanks for making this available! I’ve incorporated your tablesort library and it works, with one exception. One column in my table are checkboxes. After a sort, the checkboxes loose their state, all are un-checked. Is there anyway to have checkboxes in a table remember their state after the sort?
by Neil Crosby on March 31, 2006 06:51 AM

Jay Hills: Sorting on load is an option I’m going to have to add to a future version. It’s not going to be in the next version, but it will be there soon.

Peter: Thanks for the info! It’s not something that I’d come up against myself previously but I shall absolutely try and get this fixed - it’s hardly a good situation, is it? I’m going to be making a new release available on saturday - hopefully I’ll have this addressed by then. Could you let me know what browser(s) you saw this effect on? It would be very useful for helping to bug-fix it.
by Doug on April 4, 2006 02:27 PM

A suggestion for a future version: My table has dates written as “April 4” or “April 4, 2006”. It would be nice to sort these as dates. Currently, they are sorted alphabetically. Thanks for the great script!
by Julien on April 4, 2006 02:50 PM

Neil (comment #27): Are you sure that the addEvent function you are using is not supporting IE/Mac ? It’s using the DOM 0 event handlers and not the attachEvent and addEventListener functions…
by olivvv on April 10, 2006 06:26 PM

Hi

A very little detail. It seems that your table code is server-side generated. It would be nice not to have the whole table in one big line. Actually its necessary to re-indent it to read it.

Anyway good work. thanks.
by intelsoft on April 12, 2006 01:22 PM

Nice approach we are appreciating and want to link this with our offshore outsourcing site : http://www.intelsoftsolutions.com
by Dan on April 14, 2006 10:45 AM

Just letting you know I think this is a great script! We modified it slightly to allow images for the sort up/down display, and to allow the header cells themselves to be clicked rather than the text being hyperlinked.

If you want to have a look at the outcome, follow the url for download instructions. It looks rather nice if I do say so myself!
by Doug on April 14, 2006 03:15 PM

I made one tiny addition and tried (unsuccessfully) to fix one bug. (Line numbers refer to version 1.1.) About line 78, where the link is created, I added:

linkEl.title = 'Click to sort';

which gives a little visual feedback to the user.

The bug is that the script adds an empty link to any empty header cells; i.e., <th></th>. I tried to fix this by changing line 87 to:
```
  if (row.cells[i].childNodes.length > 0) { 
    row.cells[i].appendChild(linkEl); 
  } 
```
For some reason, that didn’t work, so I changed it to:
```
  if (!('' == row.cells[i].className)) { 
    row.cells[i].appendChild(linkEl); 
  }
```
This only works because all of my table headers have class names, but really there should be a simpler way. Guess my mediocre JS skills weren’t up to the task. But thanks to people like you for making this stuff available to the masses!
by josh anon on April 17, 2006 07:38 PM

I like the script, very useful, but your site is just plain ass creepy.
by Dan on April 18, 2006 11:21 AM

Due to the apparent interest, a nice handy zip file link was added to the bottom of the linked page.
by Welt-Blick on April 19, 2006 05:44 PM

Nice script - it works great!
by Imran khan on April 20, 2006 03:27 PM

Is it possible to sort table having rowspan?
by none on April 20, 2006 04:37 PM

Can’t seem to get it to work with Dynamically generated rows.

The headers highlight as a standard url would, but no sorting takes place.

Perhaps it’s not designed for dynamic tables?
by DB on April 21, 2006 05:02 PM

Great script! I was searching forever for something like this!

I’m attempting to sort on page load and I’ve tried every way I can think of to trigger a sort via js commands (i.e., not actually clicking on the heading), but none have worked. Anyone have any ideas?
by Andy Schworer on April 21, 2006 11:30 PM

In reference to comment 30 and 29. Adding the event listener as you prescribed still didn’t fix the onload bug.
```
addEvent(window, 'load', init);
addEvent(window, 'unload', GUnload);
```
*init() is my function I’m using for my google maps mashup app.

However, if I didn’t add this to the onload even, but just simply called it first thing in my javascript on the page it worked. The unload listener work as well…I think.
```
init();
addEvent(window, 'unload', GUnload);
```
Any ideas? Should these events be on the body element? Are you adding a load event named init() as well?
by Andy Schworer on April 22, 2006 02:12 AM

I can answer my own question in post 47.

I was generating a table with AJAX. As my code was the even handler for the Standardista Table Script Init() function was firing before my table was generated by my AJAX. Stupid mistake.

FYI: To manually run the standardista table script
```
standardistaTableSortingInit();
```
by Neil Crosby on April 22, 2006 08:21 AM

Imran Khan: Currently the module isn’t designed to sort tables which use rowspan in their data cells. Do you have a particular use case that this would be useful for?

none: Do you mean dynamically generated rows created using JavaScript? Do you have an example of the problem that you can show me? It should be working…

DB: Right now, you can’t sort a table by a particular column on load. The reason for this is the same reason that Staurt Langridge’s original script didn’t give this option - when you’re creating a page, whether statically or dynamically, you have the ability to send the table out ordered in whatever way you like. Therefore it shouldn’t be necessary to use the Standardista Table Sorting module to explicitly sort a table into some predescribed order when the page is loaded. However, this is something that various people have been asking for, so the ability will be added to a future version of Standardista Table Sorting.

Andy Schworer: Glad you got it sorted.
by DB on April 24, 2006 03:39 PM

Neil,

Excellent point. Guess I had trouble seeing the forest through the trees on that one. Thanks again for a great script!
by James Strachan on April 28, 2006 08:38 AM

Thanks for a great script!

BTW here is a trivial patch to allow the great ‘autostripe’ CSS style to be used on any table (even tables that are not sortable).

http://rafb.net/paste/results/7a5EhP15.html

(basically I just made autoStripe() a function and allowed it to be used on non-sortable tables.
by Neil Crosby on April 28, 2006 08:50 AM

Thanks for the patch James. Honestly, I don’t remember why I didn’t write the code like that myself when I included the ‘autostripe’ ability. Probably the reason was that since it’s just a tiny amount of script to do the striping anyway it wouldn’t make much sense to pull in the whole of Standardista Table Sorting (small as it may be) in order to just do some striping.

That said, I’ll separate it out in the next release so that ‘autostripe’ will work on non-sortable tables as well as the sortable ones.
by Keith on May 2, 2006 03:34 PM

Let me add my praise…great script! Neil you saved me a ton of time and energy. But…(ah you knew there was a “but”)…I’m trying to use STS with AJAX to create a sortable table, like Andy Schworer (#47-48) and “none” (#45) above. In my scenario I make an AJAX request, the server returns an HTML table and the AJAX onreadystatechange handler stuffs the table into a div tag using its innerHTML property. Simple enough, but the table does not render as a sortable table. If I add a call to standardistaTableSortingInit() as Andy mentions (#48) to the end of the AXAJ handler, the table renders as a proper sortable table, but clicking on a table header does nothing (same as what “none” describes in #45).

Has anyone gotten STS to work with AJAX? What am I missing?
by Orion_bp on May 2, 2006 07:35 PM

Very nice script. I am having a problem though in Firefox 1.5.0.2.; the table headers don’t link and sorting does not work.

I made a real simple table with some placeholder data to sort, then followed your readme instructions to implement. I cannot see any errors on the page, and FF Javascript console isn’t listing any either.

Works great in IE 6. Any idea what I might be doing wrong? Thanks.
by Neil Crosby on May 2, 2006 09:18 PM

Keith: Thanks for the praise! There’s always a “but” though, isn’t there? I’ve not personally done anything with AJAX created tables myself with Standardista Table Sorting yet, but it does sound like quite a few people are having problems with that use-case.

Orion_bp: Do you have an example of the table that’s causing you problems that can be looked at? Does the page you’re using validate? Which version of Standardista Table Sorting are you using? Does the sortable table on this page sort for you in Firefox 1.5.0.2?

Without more information, it really is incredibly hard to diagnose the problem. I’m going to be closing the comments on this entry very soon now, and suggest that people start using the Standardista Table Sorting forums over on the SourceForge site. I’ll be writing up a post soon detailing the sorts of information that will be helpful when you’re submitting a help request.
by Jonathan on May 2, 2006 09:59 PM

Doug #31 : Use the following patch to not sort on certain headers - basically, if a TH element has a certain class, short circuit the loop.
```
//at the top of makeSortable for loop
if (css.elementHasClass(row.cells[i], 'skipsort')) {
    continue;
}
```
by Orion_bp on May 2, 2006 11:04 PM

Neil - I figured out the problem. I had the .js files in a different directory and had inadvertently used backslahes (\) instead of slashes (/) to indicate such. IE had no problem with backslashes, FF did. Your question about seeing your table on this page got me to studying your syntax a bit harder which is how I dicovered the error.

Thanks very much!
by Neil Crosby on May 2, 2006 11:28 PM

No problem Orion - really glad you managed to get it sorted out.
by Keith on May 3, 2006 02:30 PM

Neil, I got my AJAX issue straightened out. I just purged my browser cache and reloaded the page, and now STS and AJAX work just fine together. Doh! My bad.
by Neil Crosby on May 3, 2006 07:00 PM

Keith: Really glad you got it sorted so easily!

by Jim C on May 3, 2006 09:24 PM

I can get the sorting routine to work in Firefox 1.0.4 but not in Firefox 1.5.0.4 . It also works in Internet Explorer. I am testing the script on a simple example file containing a sortable table.

Eventually , I was hoping to build the sortable table through a php function call that would return the defined sortable table as a string. This sortable table doesn’t work in both versions of FireFox and in IE when returned as a string. Also firefox shows that the .js files are loading , and a view of the source code shows that the table should be defined correctly. I have included table source . Can anyone help me on this. Thanks. Any reason it doesnt work with firefox 1.5.0.3

<table width='100%' class='sortable'>
    <thead>
        <tr>
            <td class='hf'>TaskID </td>
            <td class='hf'>Category </td>
            <td class='hf'>Status </td>
            <td class='hf'>Client Name</td>
            <td class='hf'>Vendor Name </td>
            <td class='hf'>Order Date</td>
            <td class='hf'>Items</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='rf'><a href='taskmgmt.php?utask=yes&utaskid=1'>0001</a></td>
            <td class='rf'>Special</td>
            <td class='rf'>Open</td>
            <td class='rf'>ZENZ,TRACY</td>
            <td class='rf'>STANFORD FURNITURE CORP.</td>
            <td class='rf'>04/28/2006</td>
            <td class='rf'>2</td>
        </tr>
        <tr>
            <td class='rf'><a href='taskmgmt.php?utask=yes&utaskid=2'>0002</a></td>
            <td class='rf'>Special</td>
            <td class='rf'>Open</td>
            <td class='rf'>PLOEN,SANDY</td>
            <td class='rf'>AFRICAN MARKET</td>
            <td class='rf'>04/28/2006</td>
            <td class='rf'>2</td>
        </tr>
    </tbody>
</table>

by JimC on May 4, 2006 12:52 AM

on my previous post the latest version of Firefox is 1.5.0.3 not 1.5.0.4 . I could not get the sorting routine to work with that version. Jim
by Ingo on May 8, 2006 04:38 PM

Bug:

Every second element in the table header is not copied to the link element. The for loop in makeSortable that moves the child elements to the link element has to be replaced with
```
while (innerEls.length > 0) {
    linkEl.appendChild(innerEls[0]);
}
```
to fix this. You cannot use an index loop over a collection that is being modified at the same time.
by Neil Crosby on May 9, 2006 08:55 PM

Jim C: I’ve had a quick look at your code, and nothing is jumping out at me that is wrong there. Have you tried clearing your cache and trying again?

Ingo: Thanks for the bugfix. I’ve now added this to the version of Standardista Table Sorting in SVN on SourceForge, and I’ll be making an updated version available for download soon, once I’ve integrated everyone else’s patches.
by Nagaraj on May 10, 2006 09:22 AM

Im adding column names in one table and the datas in another table with same attribute values and while combining these two tables, i got the improper alignment of the margin.Note: i created the table using javascript. Pls give the reply with sourcecode.
by Neil Crosby on May 11, 2006 07:00 AM

Nagaraj: I’m afraid you’re going to have to give a bit more detail before I’d be able to help you. Giving some source code in your question might have helped…

For help with using Standardista Table Sorting, please ask questions in the forums.
by Uzbek on May 17, 2006 12:17 PM

Great script. just what i wanted. Now I don’t need to worry about data sorting in my server side scripts…
by with div on May 23, 2006 08:40 AM

Let me add my praise…great script! Neil you saved me a ton of time and energy. But…(ah you knew there was a “but�?)…I’m trying to use STS with AJAX to create a sortable table, like Andy Schworer (#47-48) and “none�? (#45) above. In my scenario I make an AJAX request, the server returns an HTML table and the AJAX onreadystatechange handler stuffs the table into a div tag using its innerHTML property. Simple enough, but the table does not render as a sortable table. If I add a call to standardistaTableSortingInit() as Andy mentions (#48) to the end of the AXAJ handler, the table renders as a proper sortable table, but clicking on a table header does nothing (same as what “none�? describes in #45).
by James on May 24, 2006 03:52 AM

Am I missing something??

This Table Sorting java script is exactly what I need.

I have followed the instructions very carefully and I can’t get it to work. I get no java errors. I have copied the example table and the java scripts. I made sure the paths to the .js files are available. I tried in both IE 6 & FF 1.5.0.3

I would include an sample bit of html that would just take up to much space.

What else could I be doing wrong???

James.
by Mark on May 24, 2006 10:48 AM

Hi, Great script -

Just downloaded it and tried out the autostrip - doesn’t seem to work - I used this to activate it. The version I’m using is just the normal version when you follow the download link on this page. Can you point me in the right direction and how would I change the colour of the stripes?

Thanks,

M
by sathish on June 3, 2006 08:18 PM

Very good implementation.. could be faster for larger tables.
by Tom-21 on June 5, 2006 12:32 PM

Great script. Just what i was looking for!
by PB on June 6, 2006 08:17 PM

You should mention it somewhere that if one wants to use alternating row colors, he must name the “other” tr class ‘odd’. It took me about an hour until I figured that out.

Great script, anyway. Thanks.
by Keesjan on June 9, 2006 12:58 PM

maybe nice to publish a working example in the article?

Now its not clear to me if the colors of even/uneven rows also change correctly with this script…
by WEJ on June 9, 2006 03:52 PM

HI, this script is very nice. But I need your help for a problem with this script: I don’t want to sort the first column (beyond the header) in my table. Its an overview for some values because the user shall do not scroll down to the footer. How can I ignore the first row (beyond the header) in your pretty sort-script? Thx in advance.
by WEJ on June 11, 2006 10:09 AM

Hi, sorry I’ve made an mistake in my problem (WEJ 09.06.06-3:52 PM) description: error “beyond” must be “below”. Sorry!

by Aldo on June 16, 2006 06:58 AM

great piece of javascript I have been looking for something doing this for long I use it as frontend with a tiny perl CGI to display a CSV file as a table here is a copy of this perl CGI

#!/usr/bin/perl
####################################################
# seeSV.pl
####################################################
#
# This perl CGI display a CSV file
#
# author : Aldo DE LUCA
#
# version 20060403
# unstable devellopment version
#
####################################################

use strict;

####################################################
## GLOBAL VARIABLES
####################################################

my $CSVfile = '/var/www/macip/macip.csv';
$, = ","; # SEPARATOR

####################################################
## CODE
####################################################

# MAGIC
$CSVfile =~ /.*?(\w+)\.csv/i;
my $name = $1;

# OPEN CSV
my $CSV;
open($CSV,$CSVfile) or die "cannot open $CSVfile !\n";

# HTML
print "Content-Type: text/html; charset=ISO-8859-1\n\n";
print "<html>\n";
print "<head>\n";
print "<title>$name</title>\n";
print "<link rel='stylesheet' href='style.css' type='text/css' />\n";
print "<script type='text/javascript' src='common.js'></script>\n";
print "<script type='text/javascript' src='css.js'></script>\n";
print "<script type='text/javascript' src='standardista-table-sorting.js'></script>\n";
print "</head>\n";
print "<center><h2>".$name."</h2>last update ".localtime((stat $CSV)[9])."<br/><a href=\"$name.csv\">download CSV</a></center>\n";

# TITLE
my $title = readline($CSV);
chomp($title);
my @title = split($,,$title);
print "<table class='sortable autostripe'>\n";
print "<thead>\n<tr>\n";
foreach my $th (@title)
{
    print "<th>$th</th>\n";
}
print "</tr>\n</thead>\n";

# TABLE
print "<tbody>\n";
while(my $row = readline($CSV))
{
    print "<tr>\n";
    chomp($row);
    my @row = split($,,$row);
    for(my $i = 0;$i<@title;$i++)
    {
        print "<td>$row[$i]</td>\n";
    }
    print "</tr>\n";
}
print "</tbody>\n";
print "<tfoot></tfoot>\n";
print "</table>\n";
print "</html>\n";

close($CSV);

####################################################
## END
####################################################

by Tom on June 16, 2006 12:08 PM

Does anyone know if AJAX properly works with IE7?
by Volker on June 16, 2006 04:01 PM

Its´s a very helpful script. Thank you!
by Andrew on June 20, 2006 11:45 AM

Nice script, ran into a few problems trying to get it to decent numbers (realised that any trailing whitespace in a cell will cause problems sorting by number). Also had a few problems sorting columns with IMG tags.

This is a hack I used to get sorting working on named date formats which seems to work
```
<td><span style="display:none">1999-07-01</span>01 Jul 1999</td>
```
by rosdi on June 22, 2006 08:20 AM

Nice script, work wondefully.

One whine, is it possible to make the currently sorted column colored differently? It will make it easier to know which column is currently being sorted.
by li on June 22, 2006 03:57 PM

First off, I would like to say that the standardista sortable table is probably one of the easiest (and more importantly, fastest) I’ve worked with. However, when you do a sort, the checkboxes become unchecked. I’m just curious if this problem was ever solved (or will it be solved)? If not, I’ll probably go ahead and store the checkbox states and refresh them on sort. Unfortunately, I’m not a fan of hacks like that if there were a better solution/more updated version.
by ajs on June 26, 2006 01:53 PM

great script, thats saved me loads of work. Maybe I’ve missed it but is there anyway that number_format numerics (ie 123,456) can be sorted as numbers rather than text?
by Robert Beekman on June 26, 2006 09:03 PM

Great script, works really well!

The only problem i had was that i’m from holland and the currency has a different notation then the US one. Instead of . we use , so i had to change the script a bit to make it sort our currency ok.

All i had to do is change the match of currency to: /^[€]/

And change the currency function:

(/[^0-9,]/g,”)

note the , instead of the .

Then the function works for dutch currency’s :)
by ajs on June 27, 2006 10:14 PM

Re comment #83 got it working, I copied the sortNumeric function to sortCommaNumeric and added .replace(/[^0-9.]/g,”) as in the sortCurrency function

and added if (itm.match(/^[\d\,.]+$/)) { sortfn = this.sortCommaNumeric; } into the determineSortFunction function
by Anonymous on June 30, 2006 03:21 PM

I apologize for the previous nasty pasting. i didn’t realize there was lot of spacing in it. Here is much cleaner version.

Thanks

<neil>Code snipped. It was hugely long and unreadable I’m afraid. If you want to reference huge tables I’m afraid you’re going to have to link to a page which contains them, rather than cutting and pasting them into here. Sorry</neil>
by G on June 30, 2006 10:38 PM

Firstly, Neil I would like to thank you for the code you have provided. It sorts much faster than other codes available on the net. I am trying to sort a table which gets around 500+ rows from the database. The problem is once the user clicks on the table header to sort there is noway the user knows that his request is being processed. I was wondering is there any way we can have a label/layer or something indicating that his request is being processed and once the sorting is done make that label disappear?
by sskhalsa on July 11, 2006 06:12 PM

So, does the actual code use any tables? Is it xhtml valid?
by Neil Crosby on July 13, 2006 07:01 AM

G: Thanks for the compliments. I’ll stick something like this into the next version - it would definitely be useful. Thanks for the suggestion.

sskhalsa: Do you mean “does the code insert any tables into my page?”. Standardista Table Sorting takes the tables which you have already added to your page (and have marked with the class “sortable”) and adds behaviour so that you can sort those tables. The only markup which is added to your page are the links which surround the contents of your TH cells.

As for being XHTML valid - as long as what you’re already written is then yes Standardista Table Sorting is. That’s why it’s called “Standardista” - it’s designed to be used by people who like to do things “the right way”.
by Erde on July 14, 2006 03:56 AM

Great script. Just what i was looking for!

by Daevid on July 14, 2006 04:57 AM

The script is pretty cool. Thanks for making it.

I modified a few things…

first, I hated the ugly hyperlinks for the column headings, so I did this instead:

for (var i=0; i < row.cells.length; i++) {

//make any headers with a class 'skipsort', well, not sortable headers...
//alert(row.cells[i].className);
if (css.elementHasClass(row.cells[i], 'skipsort')) {
    continue;
}

/*
// create a link with an onClick event which will 
// control the sorting of the table
var linkEl = createElement('a');
linkEl.href = '#';
linkEl.onclick = this.headingClicked;
linkEl.setAttribute('columnId', i);
linkEl.title = 'Click to sort';

// move the current contents of the cell that we're 
// hyperlinking into the hyperlink
var innerEls = row.cells[i].childNodes;
for (var j = 0; j < innerEls.length; j++) {
    linkEl.appendChild(innerEls[j]);
}

// and finally add the new link back into the cell
row.cells[i].appendChild(linkEl);
*/

row.cells[i].onclick = this.headingClicked;
row.cells[i].setAttribute('columnId', i);
row.cells[i].style.cursor = 'pointer';  
row.cells[i].title = 'Click to sort';

var spanEl = createElement('span');
spanEl.className = 'tableSortArrow';
spanEl.appendChild(document.createTextNode('\u00A0\u00A0'));
row.cells[i].appendChild(spanEl);

}

then in headingClicked:

//var td     = linkEl.parentNode;
var td     = linkEl;

I also didn’t understand why you chose to ignore a secondary stripe color?!

doStripe : function(rowItem) {
    if (this.isOdd) {
        css.addClassToElement(rowItem, 'dataRow1');
        css.removeClassFromElement(rowItem, 'dataRow2');
    } else {
        css.addClassToElement(rowItem, 'dataRow2');
        css.removeClassFromElement(rowItem, 'dataRow1');
    }

by Lou on July 18, 2006 07:53 PM

Is SVN kept up to date? any ideas on the next release or even an update to svn?
by Neil Crosby on July 19, 2006 07:56 AM

Lou: The version of Standardista Table Sorting that’s in Subversion is currently up to date - everything that I’ve done is in there. Weather permitting I’ll try and roll some of the patches that people have written into it at the weekend and release a new version.

Daevid: Thankyou for your patch. The reason that only one stripe colour is given is that that is all that is needed. An unstriped row will inherit the background colour of the table itself.

by Nick Van Dorsten on July 20, 2006 08:53 AM

I’m currently writing a php based file management package for my in-house CMS system, and needed to be able to sort based on the files size (displayed with their size “class” i.e: 1.04kb, 3.33mb). Obviously, there is no standard type of sort that will handle them (aside from displaying them all in kb/mb/etc).

So, being the hacker-type that I am, I went ahead and drafted my own. I’ve tested it on the various types of outputs that my system generates, and it’s working just fine on all of it, should it fail, it should only be a simple regex tweak to make it work again (to allow for various other file size formats).

The code I added is below (both the check for type of sort, and the sort function itself). I hope it will be of use for someone.

If you have any questions, comments or concerns, please don’t hesitate to contact me.

Code Below

//put this where the other sort type checks are
if (itm.match(/^[\d\.,]+\s*(b|kb|tb|gb|mb)?$/i)) {
   sortfn = this.sortFileSize;
}

// add this to the sort functions...
sortFileSize : function(a,b) {
  var that = standardistaTableSorting.that;

  var aa = that.getInnerText(a.cells[that.sortColumnIndex]);
  var bb = that.getInnerText(b.cells[that.sortColumnIndex]);
  if (aa.length == 0) return -1;
  else if (bb.length == 0) return 1;

  var regex = /^([\d\.,]+)\s*(b|kb|tb|gb|mb)?$/i;
  matchA = aa.match(regex);
  matchB = bb.match(regex);

  //give file size class an integer value
  if (matchA[2].toLowerCase() == 'b') valA = 1;
  else if (matchA[2].toLowerCase() == 'kb') valA = 2;
  else if (matchA[2].toLowerCase() == 'mb') valA = 3;
  else if (matchA[2].toLowerCase() == 'gb') valA = 4;
  else if (matchA[2].toLowerCase() == 'tb') valA = 5;

  if (matchB[2].toLowerCase() == 'b') valB = 1;
  else if (matchB[2].toLowerCase() == 'kb') valB = 2;
  else if (matchB[2].toLowerCase() == 'mb') valB = 3;
  else if (matchB[2].toLowerCase() == 'gb') valB = 4;
  else if (matchB[2].toLowerCase() == 'tb') valB = 5;
  if (valA == valB) {
     //files are in the same size class kb/gb/mb/etc
     //just do a normal sort on the file size
     if (matchA[1] < matchB[1]) return -1
     else if (matchA[1] > matchB[1]) return 1
     return 0;
  } else if (valA < valB) {
     return -1
  } else if (valA > valB) {
     return 1
  }
}

by daso4 on August 2, 2006 06:03 PM

Great stuff, thanks a lot!
by Morph on August 8, 2006 03:28 PM

First of all: Neil, Good job !

I wonder, is there any way I can create a table, sorted automatically by one column ?? So the user does not have the click on the header the first time the page is loaded.
by Rob on August 15, 2006 07:08 AM

First let me say that this is a great bit of coding. I do have one problem, since I am horrible with javascript I was hoping someone could help. I want to know what I would have to do to get percentages to sort correctly (including negative percentages).

Im sure it is a breeze for you guys but im so stuck LOL!
by SwellJoe on August 21, 2006 03:38 PM

Nick, there’s a small logic error in your filesize sort. You’re doing the following:
```
 if (matchA[1] < matchB[1]) return -1
 else if (matchA[1] > matchB[1]) return 1
 return 0;
```
Which will alphanumeric sort the items. e.g. 555 is bigger than 4444 in your sort. You could do a numberic subtraction (just like in the numeric sort type already in sorttable.js):
```
 return matchA[1]-matchB[1];
```
Though with this change the numbers can’t have “,” or “.”, as place separators, in them. You’ll need to strip those before the subtraction.
by Peter on August 30, 2006 06:55 AM

If you like client side table sorting you’ll love my Dynamic Table script at http://dynamictable.com. It’s lightning fast!

Check it out, you’ll be impressed.
by Neil Crosby on August 30, 2006 07:11 AM

Peter: And costs up to $200 depending on how you want to use it! That said, it does appear to be pretty damn fast.

What level of support is available to someone who has paid for your Table Sorting script?
by Christian Escobar on September 1, 2006 06:07 PM

Excellent script, works great.

However, if an img tag is part of the header, the sort will not work.

Someone posted that they had problems sorting columns with img tags as well, but they did not post a fix.

If anyone else has encountered this problem, can you please shed some light on it?

Thanks.
by Shane on September 1, 2006 07:49 PM

This script works great, but in my very limited javascript knowledge I can’t find a way to have this sort numeric fields in reverse. Say I have a column with numbers 1-5 in the rows, it currently only sorts from 1 down to 5. I’d like to have it sort from 5 to 1. Am I missing something?
by ajs on September 8, 2006 02:36 PM

@Shane click the column a 2nd time
by Peter on September 14, 2006 11:42 PM

Neil : Anyone needing support can send me an email. I’m quite happy to help out. I help people out for nothing all the time over at devshed anyways. =)
by Tomas Kubes on September 19, 2006 01:35 PM

Hello!

I must say that I’m very impressed with the code and especially the speed.

However there is one thing that made me wonder - can the script handle situation when every element in the table has own class and id already assigned?

The page has “This Page Is Valid HTML 4.01 Transitional!” and still I cant get the script to sort this table neither on IE or FF.

Thanks, Tomas
by skube on September 22, 2006 09:36 PM

I’m wondering why I see a slight shifting in the table columns whenever I sort. Does anyone else get this? It doesn’t seem to happen on the demo above, but it does happen on the download version. Using either FF or IE.
by Tomi on September 25, 2006 02:46 PM

How can I remove of those arrows pointing sort-order?
by Johnny on October 2, 2006 08:02 PM

For some reason, when I add a dollar sign ($) or a comma(,) to my table the currency sort does not work. I have about 100 lines with some currency fields left blank. Works fine in the examples but does not work with my array. What gives?

Other than that…. GREAT SCRIPT!!!
by Janelle Zimmerman on October 4, 2006 04:07 PM

Is there any way to modify the code to be able to keep 2 rows sorted together while sorting on a column in the first row? I.E. I have the columns of data I want to be able to sort on in the first and corresponding ’s - but underneath that row I have another with one with a bunch of text that I want to keep sorted with the row above it.
by itzco on October 7, 2006 08:23 PM

Really cool script works great, thanks Neil

Now I’m trying to extend it to allow selection by row with color changes etc, like a grid

I modified the code so it accepts form controls and doesn’t loose the values, in my test all controls keep their values with exception of the Radio and Check box controls.

in order to keep consistency I’m ‘informing’ the script the sensible column with a css style (as with the ignore for not sorting)

code:

1) Add a var at the top to hold the index of the columns with controls after: lastSortedTable: -1, add: safeColumns: -1,

2) In the init function add: safeColumns = new Array();

3) Add the code to don’t add the header (not make sortable by this column) if (css.elementHasClass(row.cells[i], ‘safeCol’)) { safeColumns[safeColumns.length] = i; continue; } // this is identical to the one pasted before, just change the style!

4) The important part :) The value is kept properly in all the operations, the line where the value of the checkbox is lost is:

table.tBodies[0].appendChild(rowItem);

The cleanest solution I found it to add another sort function so the tables with no controls are not afected paste this code:

moveRowsSafe : function (table, newRows) { this.isOdd = false; safeColsCount = safeColumns.length; temp = new Array(safeColsCount - 1);

// We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones for (var i=0;i
```
// store html for preserving value...
for (var j=0; j< safeColsCount; j++) 
{
 temp[j] = rowItem.cells[safeColumns[j]].innerHTML;
}
x = table.tBodies[0].appendChild(rowItem);
for (var j=0; j< safeColsCount; j++) 
{
x.cells[safeColumns[j]].innerHTML = temp[j];
}
}
```
},
- This solution use an array to hold the indexes of the columns with controls (use just for Radio and Check the other ones are not affected!) and then copies their content as HTML.. not so clean but don’t know better :D
now we only split the execution line

Add this lines under: moveRows : function(table, newRows) {
```
  if (safeColumns.length) {
    this.moveRowsSafe(table, newRows)  ;
    return;
  }
```
Not so elegant and not so fast, but it works

Execution time slows a lot probably more than twice the time, so for a test with 350 records with 3 columns with form fields took around 800 milliseconds. while without took less than 300. However for a list with controls I think the user can wait a second

If you have better solutions please post!

It would be cool to get functionality to select records and a message while posting like in yahoo mail

ordering your information..
by Alfred Zhao on October 10, 2006 06:48 AM

Standardista has some scalability issues. When the table size exceed 1000 rows, firefox complain “client script taking too long to run”.
by C.Lalitha on October 11, 2006 05:55 AM

Hi, Really very teriffic code, works very fine but how to use this sorting for only one column not all the columns in table. Please give me suggession.

Thanking you, Lalitha.C
by Chris on October 11, 2006 11:34 AM

very good script and your support is great thx.
by Pozycjonowanie on October 15, 2006 11:55 AM

How can I remove of those arrows pointing sort-order?

by Christopher Kelly on October 16, 2006 01:35 AM

run : function() {
    var tables = document.getElementsByTagName("table");

    for (var i=0; i < tables.length; i++) {
        var thisTable = tables[i];

        if (css.elementHasClass(thisTable, 'sortable')) {
            this.makeSortable(thisTable);
            this.kcAutoSort(thisTable);
        }
    }
},

kcAutoSort : function(table)
{
    var row = table.tHead.rows[table.tHead.rows.length - 1];

    for (var i=0; i < row.cells.length; i++)
    {
        if (css.elementHasClass(row.cells[i], 'autosort'))
        {
            row.cells[i].onclick();
        }
    }
},

by Harry on October 16, 2006 07:19 AM

Hi, This is very nice script.I have one problem. By table contains some columns those columns data contains the images.Till now my application is using sorting at server side. so whenever i click table header it goes to server side and do sorting based on the imges SRC value. I want to do same thing at client side means sorting the column header based on the IMG tag’s SRC value what should i do for that.
by Hiren on October 16, 2006 11:08 AM

Excellent script, works great.

However, if an img tag is part of the header, the sort will not work.

Someone posted that they had problems sorting columns with img tags as well, but they did not post a fix.

If anyone else has encountered this problem, can you please shed some light on it?

Thanks.
by The_Dragon on October 19, 2006 08:17 AM

Very nice script, but two open questions :):
1. How can I assign a “no-sort-tag” to a column? I am looking for something like: to avoid the sorting in a certain column.
2. The class ‘numeric’ () fails in correct sorting if a space (&nbsp) appears behind the numeric value. (sorting: 1,10,100,101,109,11,110,119,12,120 a.s.o.) How can I force the correct sorting (despite of cancelling the space).
by The_Dragon on October 19, 2006 02:56 PM

Should have read the whole stuff, before posting… Post No. 56 by Jonathan solves the “no-sort-tag�? problem.
by pilot on October 23, 2006 11:07 AM

Hi,

is it possible to sort values like “185.340,00” the correct way? I’d be very pleased if someone could tell me the necessary steps to add this functionality.
by CableGuy on October 24, 2006 12:26 PM

Should have read the whole stuff, before posting… Yes correct “The_Dragon”. But why not answering the answer?
by The_Dragon on October 24, 2006 01:52 PM

@Cable Guy, Could you be so polite to explain what exactly is disturbing you in my former post? My question was yet answered by Post No. 56, so if you like to add a skipsort class to an html-element use the following patch of Jonathan in the js-function makeSortable :
```
for (var i=0; i < row.cells.length; i++) {
if (css.elementHasClass(row.cells[i], 'skipsort')) {
    continue;
}
```
usage:
```
<th class="skipsort">
```

by Daevid on October 25, 2006 08:22 AM

Because I rule and was tired of img sorting not working, I think I figured it out. I don’t guarantee it’ll work 100% of the time, or that it’s fast or anything, but it should get you going and hopefully someone can improve up on it…

add this to the top of “determineSortFunction”

if (itm == 'image') {
    sortfn = this.sortImage;
}

add this to “headingClicked” after the first while loop (that looks almost the same)

//if we didn't get anything, then try to deduce if it's an image or not
if (itm == '')
{
    rowNum = 0;
    while ('' == itm && rowNum < table.tBodies[0].rows.length) 
    {
        timage = table.tBodies[0].rows[rowNum].cells[column].innerHTML.toLowerCase();
        if (timage.match(/<img.*src ?= ?["'](.*?)["'] /))
            itm = 'image';
        rowNum++;
    }
}

That’s kind of a hack b/c you don’t get inner HTML when you ask for “that.getInnerText()”

It’s also a bit wasteful as you have to traverse the entire column to figure out that you might be looking at images and not ‘data’. This could be optimized I’m sure… Neil, I pass the gauntlet to you to incorporate and fix this in a future release. :)

add this function where the other sort routines are

sortImage : function(a, b) {
    var that = standardistaTableSorting.that;

    var aa = a.cells[that.sortColumnIndex].innerHTML.toLowerCase();
    var bb = b.cells[that.sortColumnIndex].innerHTML.toLowerCase();

    var regex = /<img.*src ?= ?["'](.*?)["'] /i;
    imagea = aa.match(regex);
    imageb = bb.match(regex);

    if (imagea[1] == imageb[1]) {
        return 0;
    } else if (imagea[1] < imageb[1]) {
        return -1;
    } else {
        return 1;
    }
},

So the way I structure my images are something like this:

<td align="center"><img src="images/icons/rating_meter_0.gif" width="61" height="18" title="Rating of 0/10" border="0"></td>

so basically what I do is grab the src=”” part and then alpha sort it. Not sure how else you could sort images other than alpha-numerically…

by Daevid on October 25, 2006 08:24 AM

Dude! you’re magic form thing here blows! it says I can use HTML and then tries to reformat my HTML. GRRRR. At least put a legend here of what tags are allowed, and what they do? sigh
by ajs on November 2, 2006 01:45 PM

Hi, is there any way that the sorting can cope with colspans? Something like class=’colspanx’ where x=the column number within the colspan.

by Daevid Vincent on November 3, 2006 06:07 AM

Here’s a drop in replacement and improved version of this method. Basically it was crapping out if I had something like “N/A” or if the column was empty :-\ :

sortCurrency : function(a,b) { 
    var that = standardistaTableSorting.that;

    var aa = parseFloat(that.getInnerText(a.cells[that.sortColumnIndex]).replace(/[^0-9.]/g,''));
    if (isNaN(aa)) aa = 0.00;

    var bb = parseFloat(that.getInnerText(b.cells[that.sortColumnIndex]).replace(/[^0-9.]/g,''));
    if (isNaN(bb)) bb = 0.00;

    return aa - bb;
},

by Anand on November 3, 2006 09:06 PM

Does anyone know how I can extend Standardista to sort dates according to this format: mm/dd/yy. I know that out of the box is sorts dd/mm/yy.

Thanks!
by ajs on November 4, 2006 09:22 PM

@Anand, have a look at standardista-table-sorting.js, in there is a function sortDate and in that you’ll see 4 lines that contain substr(3,2)+bb.substr(0,2). Try swapping the 3,2 and 0,2 around
by herman on November 5, 2006 07:40 PM

Is there a way to strip out the HTML tags before doing the sort? Say I have row 1 as John, row 2 as Mary, it doesn’t sort correctly on the names.

Thanks a lot.
by Anonymous on November 8, 2006 09:01 PM

I love this script. It is fast and easy to implement. Any idea why I have problems when trying to implement in an SSL type site ?

Thank you.

Gary
by Existenzgruender on November 9, 2006 04:01 AM

Thank you for the very helpful script. This java script is great for my work!
by Ezra on November 9, 2006 06:43 PM

I’m using the script in a simple ajax application and keep receiving “has no properties” errors. I’ve created a simple html file on my local machine to test the script but keep receiving the errors. am i defining my table incorrectly? it has an id, name and class.

The errors from venkhman from a single column click are posted below. Thanks! Error that.getInnerText(b.cells[that.sortColumnIndex]) has no properties'' [xs] in filefile:///Users/ezra/Developer/directory/Projects/otherdirectory/TEST/standardista-table-sorting.js”, line 296, character 0. Exception TypeError: that.getInnerText(b.cells[that.sortColumnIndex]) has no properties'' thrown from function anonymous(a=HTMLTableRowElement:{0}, b=HTMLTableRowElement:{0}) in <file:/Users/ezra/Developer/directory/Projects/otherdirectory/TEST/standardista-table-sorting.js> line 296. [e] message = [string] "that.getInnerText(b.cells[that.sortColumnIndex]) has no properties" ExceptionTypeError: that.getInnerText(b.cells[that.sortColumnIndex]) has no properties” thrown from function anonymous(e=MouseEvent:{0}) in line 188. [e] message = [string] “that.getInnerText(b.cells[that.sortColumnIndex]) has no properties” Error TypeError: that.getInnerText(b.cells[that.sortColumnIndex]) has no properties'' [xs] in filefile:///Users/ezra/Developer/otherdirectory/Projects/otherdirectory/TEST/standardista-table-sorting.js”, line 296, character 0.directory
by Yang on November 24, 2006 07:27 PM

These scripts work great for me. Thanks so much..

I am also wondering if there is anyway to display the table in separate pages? And give the result a page chooser to go to a specific page. The sorting should also based on the whole tables, not the displayed one.

Usually, I use JSP to realize this, however that makes the code very dirty.

Thanks!
by Vin on November 27, 2006 10:49 AM

Hi, I needed some help with javascript and i believe that i have come to the right place. i’ll get straight to the point,I have a table by name(product) which has a field called productid and has values like pepsi, coke, beer etc. I have a another table called details which has 2 fields (one being productid and the other being description) the product_id field has the same values as in (pepsi, coke, beer etc and the description filed has some description for each data. now using JS i was able to get all the values from the first table(product) to display on a page now the problem i am trying to fix is if i click on assume pepsi i want the description from the second table to appear on the page similarly if i click on coke or beer etc. is there way to fix this using JS?

please do let me know if you need more details and i will provide the same….

Best Regards………….. Vin
by Braut on January 7, 2007 04:19 PM

Nice script, I think it will work also in my application. But I need an other funktion. Does anyone here know if it is possible to sort the table after another event automaticly. I did not find out how to do that…
by John on January 11, 2007 05:28 PM

Hi I like your javascript Sorting. the problem i have is when i use the OnLoad() javascript func on the BOdy tag . your sorting is not working . please help me.

Thanks John
by Tanie linie lotnicze on January 20, 2007 01:05 PM

grear script - no errors. Fantastic article covering some points I really needed some good usability info for. Best regards from Poland
by Jazzer on January 24, 2007 02:59 PM

Is there a way to change the image used for the arrow? Or change the color? The default doesn’t work well with my header color.
by ajs on January 25, 2007 10:59 AM

@jazzer, yes you can change the arrow image, I’ve done the same on my site. You would just need 3 new image files and then do a search and replace for the image filenames in the source files.
by Jazzer on January 25, 2007 01:51 PM

I don’t see any images associated with the files at all. It appears that the arrows are created in the js.
by ajs on January 26, 2007 09:25 PM

@Jazzer, ok, have a look at standardista-table-sorting.js. In there you’ll see reference to res/arrowtransparent.png, res/arrowup.png and res/arrow_down.png ie 3 image files that live in the res sub-directory. Either edit the file and point to your image files or overwrite the original files with yours, after backing up the originals of course, maybe ;)
by jazzer on January 29, 2007 03:17 PM

ajs, the script on YOUR site uses images for arrows, but the script on this page uses unicode to display arrows. Unfortunately, there is only one unicode arrow that displays in IE, and those are too thin for my purposes. I tried using a double arrow unicode character, but IE does not display it.

Is there a way to change the line in the js - spanEl.appendChild(document.createTextNode(’ \u21D3’)); to display a special character entity instead of unicode? Like ⇓

Your script modifications may be the one to go with, but I found that the arrows get resized and look funny and there are many other style things I need to change to fit my pages.

But thanks for one solution.
by ajs on January 30, 2007 12:10 PM

@jazzer, oops, my mistake. I must have an old version of the code, I hadn’t realised it had changed.
by Jay K S on January 30, 2007 02:38 PM

Great Script, but I have one issue, I’m using this script to sort a table which has 1000 rows, now when I click the header I want to display the message saying “Sorting Column.. Please Wait”, and also the mouse pointer change to hourglass, I tried to do it in the headingClicked function, the message gets displayed after the column is sorted, I want to do this while its sorting, is it possible.

Thanks
by Kamiel Vandezande on January 31, 2007 10:05 AM

Does anyone know how to make empty values in rows go to the back? I tried adding this to the caseInsensitive sort function, but the results are scrambled:

} else if (isCellEmpty(aa)) { return -1; }
by Kamiel Vandezande on January 31, 2007 10:08 AM

Scratch last questions: this is the solution:

if (aa==bb) { return 0; } else if (!isCellEmpty(aa)) { return 1; } else if (!isCellEmpty(bb)) { return -1; } else if (aa < bb) {
```
        return -1;

    }  else {
        return 1;
    }
```
by Rich on February 1, 2007 09:22 PM

Hi,

I have referenced the .js files in my head tag and I then generate a table from our DB. I format it correctly but the table doesn’t sort. Has the problem with dynamically generated tables been resolved? Are there any work arounds or does anyone know another script I could use to accomplish this?

Thanks! Rich
by Meble on February 2, 2007 05:54 PM

Great code :-)

One problem though. What if i want to rule out one or more TH so that they cannot be sorted upon? Thanks Aukcje
by ajs on February 4, 2007 12:15 AM

@Meble, give your or a class of skipsort ie
by ajs on February 6, 2007 09:45 AM

oh well, that didn’t work, can’t use gt lt brackets it should’ve said give your TD or TH a class of skipsort ie TD class=skipsort
by bjawnie on February 10, 2007 02:54 PM

@Andrew #80

Excellent hack, works like a charm.

Unfortunately the code wasn’t visible so I will just post it again for clarity.

@Andrew #80 wrote: “This is a hack I used to get sorting working on named date formats which seems to work” 1999-07-0101 Jul 1999
by bjawnie on February 10, 2007 02:57 PM

Hm.. I am just try to post that again: <td><span style=”display:none”>1999-07-01</span>01 Jul 1999</td>
by Hotel on February 12, 2007 06:47 PM

Great article One problem though. What if i want to rule out one or more TH so that they cannot be sorted upon? Thanks Hotel w Lublinie
by Dominik Schmid on February 20, 2007 02:13 PM

I’d like to second Hotel’s comment: I would very much like to be able to exclude columns which can not be sorted upon. Following the logic of “sortable” class applied to the TABLE these THs would ideally have a class called “nosort” or similar.

I have tried tinkering around with the scripts but my JS skills don’t seem to be sufficient…

Any input would be welcome!
by Dominik Schmid on February 20, 2007 02:41 PM

I have a small addition to the date format detection regex. Living in a German speaking region I always use one of the following date formats: dd.mm.yy or dd.mm.yyyy

You can easily include these formats by changing lines 269 and 272 in standardista-table-sorting.js to

if (itm.match(/^\d\d[\/.-]\d\d[\/.-]\d\d\d\d$/)) {

and

if (itm.match(/^\d\d[\/.-]\d\d[\/.-]\d\d$/)) {

respectively.

Cheers
by Dominik Schmid on February 20, 2007 04:39 PM

Nevermind, my question (#154) has already been answered above (post #56).
by Gerard R. on February 20, 2007 09:10 PM

How can I sort data which is listed over multiple pages? Example: the number of records is 50, and I show only 25 per page.
by Dominik Schmid on February 21, 2007 10:45 AM

I have another request: I would like to separate the autostripe and sorting parts of the script/JS functions so that I can class a table as autostripe without having to class it as sortable to get the alternate row coloring.

It has been stated above (#52) that this would be implemented in a future release. I don’t seem to be able to confirm that and this basically still doesn’t work yet. Has this somehow been forgotten?

Many thanks for any input
by Harry on February 22, 2007 03:16 PM

Dominik:

I needed a “nosort” feature too, so I added one. At line 93 of standardista-table-sorting.js, I added (right after the for loop):

if(css.elementHasClass(row.cells[i], 'nosort')) { continue; }

Tested on Firefox.

I did this to fix a bug: I use it for a column which only contains checkboxes. I found that if you click just outside the checkbox (presumably, within its margin) the column is sorted. The checkbox in the header row just selects all the body rows, so it doesn’t make sense for it to be sortable anyway.

Another request: add support for sorting by string dates — eg Monday 25th September rather than a numeric date. This is a bigger change than I felt like hacking in :)
by Andy on February 26, 2007 09:33 PM

Hi,

Can get the script to work. Tried it on FF 2, IE7 and Opera 9. Ive added the code links to the head of the webpage added table class and thead, tbody tags, but it just wotn sort. When I hover over the table headers it says “click to sort”, but when you click the link nothing happens. Please please help!
by Andy on February 26, 2007 09:35 PM

Previous comment should say “CAN’T” not can get script to work.
by Andy on February 26, 2007 09:43 PM

Previous comment should say “CAN’T” not can get script to work.
by Zweithaar on February 28, 2007 05:20 PM

oh, you made my day. this java script is great and exactly what i was looking for… thanks!
by ajs on March 1, 2007 12:18 AM

@andy (#160). Can you post a url to your page, I’ll take a look
by Ralph Slate on March 1, 2007 05:00 AM

This is a great function; however, when using it, I find that although I would like to initially sort Alpha columns in ascending order, I would like to sort numeric columns in descending order (high values are more interesting than low values). Could this be a future enhancement?
by Ralph Slate on March 1, 2007 05:19 AM

This is a great function; I have one enhancement request.

I find that when I’m sorting by numbers, low-to-high isn’t very interesting. I’d rather see the first click of the mouse bring me high-to-low. Is that a possible future enhancement?
by Louis on March 1, 2007 07:14 PM

Hi Can anyone tell me how to sort days (Monday, Tuesday, etc) and months (January, February, etc) Thanks Louis
by Louis on March 2, 2007 02:08 PM

Hi Sorting Days? I have tried adding the relevant code see link below but thereafter the script loads the links but does not sort. Can anyone help? Thanks Louis. www.theclave.com/js/standarista/standardista-table-sorting_ljk.js
by ajs on March 12, 2007 09:19 PM
168 and #170, Sorting Days, click my username above then look at http://ubt-seti.dyndns.org/ajs/standardista-table-sorting.js
and find the sortDays bits. It would also work for months with a bit of tweaking.
by Christophe Strobbe on March 23, 2007 03:02 PM

Hi, I tested the script on a table that has Chinese characters in the first column. I find the same sort order in Internet Explorer 6, Firefox 2, Seamonkey 1.1 and Opera 9.02, which is what I hoped to find. As far as I can see (I looked at the sort order for Chinese characters, but I checked the JavaScript code only superficially), the characters are sorted by their Unicode code points (the page I mentioned is in UTF-8), after converting everything to lower case. This works fine in English and a number of other languages, but users of this script should bear in mind that sort order is really language dependent. And so-called ideographic languages have various way to order characters: by phonetic, by radical, by stroke count, etcetera.
by Stephen on April 4, 2007 09:58 PM

This is a modification to the code provided by Daveid (which replaced the a element with a clickable TH).

In the headingClicked function:

// directly outside it is a td, tr, thead and table if (linkEl.nodeName!=’TH’) { linkEl = linkEl.parentNode; } var td = linkEl;

His code worked fine in Firefox, but Safari wouldn’t sort correctly when clicking the arrow.
by Louis on April 7, 2007 01:59 PM

Thanks a million AJS Works like a dream

by ajs on March 12, 2007 09:19 PM 168 and #170, Sorting Days, click my username above then look at http://ubt-seti.dyndns.org/ajs/standardista-table-sorting.js and find the sortDays bits. It would also work for months with a bit of tweaking.
by Dolormin on April 10, 2007 06:39 PM

that JAVA scrpit is perfect - thanks. Very usefull for our projects!
by Josh on April 10, 2007 10:15 PM

Grat, this script is awesome. (I was looking for client side scripting to reduce hits to my database)

This is pretty damn nifty, great work, thanks man.

One thing though, I can;t figure out what I’m doind wrong, but I have a column that has auto numbers on it, like 1 trough 100, etc..

when I sort by that, it arranges them in a weir way, sort of like:

1 10 11 12 2 20 21

how can I format this “td” so that it sorts like a normal numeric field. ex:

1 2 3 4 5 10 11

thanks :)
by ajs on April 11, 2007 04:26 PM

Josh, I think you’ll find that your numbers have a space before them like ” 1”, ” 2” (rather than “1”, “2” etc) which will make them be sorted as text rather than numbers.
by digitali on April 13, 2007 05:36 AM

L’information interessante que vous avez! I’am allant revenir bientot.
by Pozycjonowanie on April 21, 2007 11:47 AM

One whine, is it possible to make the currently sorted column colored differently? It will make it easier to know which column is currently being sorted. Greetings
by forum on April 29, 2007 11:11 AM

Is there a way to change the image used for the arrow? Or change the color? The default doesn’t work well with my header color.
by bannery reklamowe on April 30, 2007 11:32 PM

very nice work. if u can show the position with it of a object with it then it would be nice. if it is already happening there, then please tell me how it is. thanks for nice tool
by Mat on May 1, 2007 01:07 PM

Great script. Just one thing… I’d like to replace the up and down arrows that are displayed with images.

Ideally, I’d like all columns to have an up/down image by default, and the selected column to have the appropriate image to highlight the sort order.

Unfortunately, PHP is my strength, JavaScript is not. Any advice on how to achieve this? Thanks.
by Tworzenie stron www on May 10, 2007 08:44 PM

One whine, is it possible to make the currently sorted column colored differently? It will make it easier to know which column is currently being sorted. Greetings
by Guido on May 11, 2007 06:32 PM

For all those people who want the arrow replaced: go in the main js and replace the two unicode lines, like for example the descending one:
```
        spanEl.appendChild(document.createTextNode(' \u2193'));
```
to this:

var downarrow = document.createElement(‘img’); downarrow.src = “images/datatablesorted_down.jpg”;
spanEl.appendChild(downarrow);
by Katalog on May 16, 2007 08:01 AM

However, if an img tag is part of the header, the sort will not work.

Someone posted that they had problems sorting columns with img tags as well, but they did not post a fix.

If anyone else has encountered this problem, can you please shed some light on it?
by ajs on May 20, 2007 09:36 PM

I use arrow images instead of unicode and the sort still works. I’ve no idea how or why though
by proxy on May 23, 2007 07:43 PM

Do you know is it possible to sort the table after and another javascript event ?
by Joe on June 1, 2007 10:03 PM

Hi all, I was wondering if anyone had a fix for the slight “push” I see in the header row when the table finishes loading. Here is the page I’m referring to:

http://www.destination360.com/north-america/us/nevada/las-vegas/list-las-vegas-shows-6.php

After loading the text in the headers move to the left a few pixels it seems (and then again when you sort by that column and the arrow appears). Does it have something to do with the up/down arrows? I’m not a whiz at editing js code so if someone could point me to a solution I’d be grateful. Thanks! And sorry if this has been asked, but I didn’t see it when reading previous comments.
by voiceGuy131 on June 5, 2007 06:50 PM

Pretty cool script - quick question though:

My first table column has a form checkbox in it. e.g. … Bob Jones Mary Johnson

(a) The script works great for me in IE 6 & 7. (b) However, in FireFox (1.5) after sorting one or more of the columns, the checkbox elements of my form in the first column no longer exist. I can’t access/identify them via javascript (document.forms.etc, getElementsById, etc.). Could the cell re-rendering might be omitting the form tags or something?

any ideas? many thanks in advance
by Nick on June 6, 2007 10:11 PM

Anyone think of making a Wordpress plugin for this? Perhaps something that works in the WYSIWYG editor for Wordpress to insert a sortable table, choose a class for its style from a stylesheet with a few template options, and presto!

I just might have to make one.
by Tom Jinke on June 12, 2007 03:00 PM

One problem though. What if i need to rule out more TH so that they cannot be sorted upon ? btw.thanks rof article
by Tamponiarki on June 13, 2007 08:47 AM

Ups, you can delete the previous entry. My fault, the firewall ;) It works! Cool script!!!
by Zarządzanie nieruchomościami �?ódź on June 13, 2007 08:51 AM

Do you know is it possible to sort the table after and another javascript event ?…
by Ben on June 19, 2007 03:36 PM

Hi,

i am trying to use your script. Did all you told in the small tutorial above :)

but … it does not work

WinXP FireFox 2.0 IE 7 IE 6

none of them.

i figured why it does not work.

when the onClick function is called, the event which is passed, is undefined. I don’t know why, but it is :)

The Example on your webpage is working, but local on my computer it isn’t.

Some ideas?

best regards,

Ben
by bijaya on June 21, 2007 12:16 PM

Its a great sorting script. but i hav one doubt that how can i cahange the colur of header from pink to my choice. we are using our own css. please reply anybody.
by Anne on July 1, 2007 01:18 PM

What´s the matter? I can´t sort days.
by Knopf on July 7, 2007 09:04 PM

that JAVA scrpit is perfect. best regards,Klaus.
by Carol Ericson Ballontiere on July 10, 2007 08:54 AM

Hello, thanks a lot, the script works 100 %. Kind regards
by garyseattle on July 13, 2007 10:35 PM

Fantastic tool, thank you, well done.

To answer regarding sort ascending vs descending, you can sort number columns descending with higher numbers at the top initially by changing this line in standardista-table-sorting.js:

From: sortNumeric : function(a,b) { To: sortNumeric : function(b,a) {
by Kaolin Fire on July 15, 2007 10:11 AM

I’d like, in an ideal universe, to be able to sort “groups” of rows together.

For instance:

row group 1: title of piece, number of words, genre short description of piece

row group 2: title of piece, number of words, genre short description of piece

It would be really spiff if “short description of piece” stayed with the more tabular data it referenced… (i.e. I could sort by number of words, and the stories==rows reordered, and descriptions stayed under the relevant stories… and if there’s a better way to mark that up, I’d love to hear it :) )

Meanwhile, I’ll sort this bit with php/mysql and keep standardista table sorting in my arsenal for the next time I need something like. Thank you for it!
by Aukcje on July 15, 2007 10:50 AM

It’s very good article. Great site with very good look and perfect information. I like it too
by repliki kuszy on July 15, 2007 12:28 PM

Great script. Just one thing… I’d like to replace the up and down arrows that are displayed with images.

Ideally, I’d like all columns to have an up/down image by default, and the selected column to have the appropriate image to highlight the sort order.
by repliki kuszy on July 15, 2007 12:29 PM

Great script. Just one thing… I’d like to replace the up and down arrows that are displayed with images.

Ideally, I’d like all columns to have an up/down image by default, and the selected column to have the appropriate image to highlight the sort order.
by 18 prezenty on July 15, 2007 12:33 PM

Great script. Just one thing… I’d like to replace the up and down arrows that are displayed with images.

Ideally, I’d like all columns to have an up/down image by default, and the selected column to have the appropriate image to highlight the sort order.
by Serg on July 15, 2007 01:13 PM

Previous comment should say “CAN’T�? not can get script to work.
by Brett on July 25, 2007 01:43 PM

All seems to work OK except my date field where the header isn’t clickable. Seems to be the only column I have trouble with. Any ideas?
by chat on July 28, 2007 10:02 PM

All seems to work OK except my date field where the header isn’t clickable. Seems to be the only column I have trouble with. Any ideas?
by Spa on July 30, 2007 08:24 AM

What´s the matter? I can´t sort days.
by Emlak on August 1, 2007 11:23 PM

I’d like, in an ideal universe, to be able to sort “groups�? of rows together.
by Alfret on August 11, 2007 10:42 AM

This is a great post, but it does not yield some of the out-of-the-box issues. This type of strategy is very expensive to take on from a client’s point of view. Considerable research must be conducted and in many cases, money has to be paid for quality ‘under-the-radar’ links.
by Lee on August 15, 2007 01:16 AM

This is a very nice code, but it won’t work properly with my numberRows script. When it comes to javascript I don’t really know what I’m doing (I basically do a lot of copying and pasting). So could you, or anybody, please look at the source code for my page and tell me why the two scripts don’t work together, and how I could possibly fix it?
by Lee on August 15, 2007 01:28 AM

This is a very nice code, but it won’t work properly with my numberRows script. When it comes to javascript I don’t really know what I’m doing (I basically do a lot of copying and pasting). So could you, or anybody, please look at the source code for my page and tell me why the two scripts don’t work together, and how I could possibly fix it?
by Lee on August 15, 2007 06:08 AM

re: #293. Never mind. I found the solution in the bugs section. Guess I should have checked there first. Thanks!
by Maxim on August 16, 2007 01:17 PM

First let me say that this is a great bit of coding. I do have one problem, since I am horrible with javascript I was hoping someone could help. I want to know what I would have to do to get percentages to sort correctly (including negative percentages).
by Roland on August 19, 2007 06:15 PM

Hello Neil, go for your ideas! much regards from Germany

Roland
by Dominik Schmid on August 19, 2007 08:06 PM

Please, please install som captcha script to prevent the spam postings! This comment thread is already long enough without it. I have read through a lot here before the spamming startedm but for new visitors it might be frustrating…

Thanks ;)
by kredi on August 20, 2007 09:41 PM

really good article. it works. thx. good luck for next projects
by sohbet on August 21, 2007 05:25 PM

If you read all these comments, you relize hou lost we realy are when it comes to alternitive feuls. I think there might be some conspiracy from our goverments and there is a lot of con artists in this for money. But one thing is for sure - you can not buy a car that uses water as feul. I think we must start using wind and sun energy to safe money at home and spent it on fuel untill hybrid cars become the norm
by Christof on August 21, 2007 10:49 PM

Great Scripts, exactly what i was looking for. You just saved me a lot of time. Thank you!
by Nitin on August 22, 2007 12:07 PM

Hi! This code is really very beautiful.It helped me a lot but my some problems are still there because of my table has Rowspan solumns.If any body has some idea or any reference than please suggest me.

Regards Nitin
by Anastasia on August 22, 2007 07:52 PM

Thanks for this complete information. Although I’ve heard about this from friends long time ago, I still want to know the latest information regarding Standardista Table Sorting from you. Any latest version about this?
by Anastasia on August 22, 2007 07:59 PM

For some reason, when I add a dollar sign ($) or a comma(,) to my table the currency sort does not work. I have about 100 lines with some currency fields left blank.

Works fine in the examples but does not work with my array. What gives?

GREAT SCRIPT!!!
by Anastasia on August 22, 2007 08:05 PM

This code is really very beautiful.It helped me a lot but my some problems are still there because of my table has Rowspan solumns.If any body has some idea or any reference than please suggest me.
by Anastasia on August 22, 2007 08:13 PM

Great Scripts, exactly what i was looking for. You just saved me a lot of time. Thank you!
by sohbet on August 22, 2007 08:51 PM

I have followed the instructions very carefully and I can’t get it to work. I get no java errors. I have copied the example table and the java scripts. I made sure the paths to the .js files are available. I tried in both IE 6 & FF 1.5.0.3
by Konin on August 23, 2007 08:51 AM

It works great.I have copied the example table and the java scripts.

look on my site: My site
by fal on August 25, 2007 05:07 PM

I have followed the instructions very carefully and I can’t get it to work. I get no java errors
by kursy i szkolenia on August 29, 2007 11:56 PM

Is there any way to modify the code to be able to keep 2 rows sorted together while sorting on a column in the first row? I.E. I have the columns of data I want to be able to sort on in the first and corresponding ’s - but underneath that row I have another with one with a bunch of text that I want to keep sorted with the row above it
by kadry on August 30, 2007 12:13 AM

great script, thats saved me loads of work. Maybe I’ve missed it but is there anyway that number_format numerics (ie 123,456) can be sorted as numbers rather than text.

THX
by منتديات on September 1, 2007 08:40 AM

wow Simply beautiful It’s so usefull

thanks

Basim
by kadry on September 1, 2007 03:13 PM

I’m having some problems making the table “sort�? when the page loads. I want the table column with, say, names to sort itself alphabetically when you look at the page initially, not only when you click.

How would I do this?
by Artikel schreiben on September 1, 2007 07:49 PM

Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.
by oyunlar on September 3, 2007 07:46 PM

Anyone think of making a Wordpress plugin for this? Perhaps something that works in the WYSIWYG editor for Wordpress to insert a sortable table, choose a class for its style from a stylesheet with a few template options, and presto!
by liquid06 on September 4, 2007 09:17 PM

Hi!

Very graceful and very useful. I know nothing of Javascript and I am pleased and excited to use this code on a page I am working on. It’s not all the time useful items can be found on the internet! Thank you for this extraordinary tool.

~liquid06

search

other relevant pages

the best of wwm

about wwm

workingwith.me.uk is a resource for web developers created by Neil Crosby, a web developer who lives and works in London, England. More about the site.

Neil Crosby now blogs at The Code Train and also runs NeilCrosby.com, The Ten Word Review and Everything is Rubbish.

Standardista Table Sorting (A client-side JavaScript Table Sort module)

How to use Standardista Table Sorting

Extended Pointers for using Standardista Table Sorting

An Example Table to Sort

Goals for my Table Sorting script

What’s in the three JavaScript files?

standardista-table-sorting.js

common.js

css.js

Where does Standardista Table Sorting come from?

What browsers does Standardista Table Sorting work in?

Further, Table Related, Reading

Feature Requests? Bugs?

TrackBacks

Sorting HTML Tables with JavaScript from Bogo's Blog on February 27, 2006 01:15 AM

Sorting HTML Tables with CSS and Javascript from Man, programmer, law student on February 28, 2006 03:48 PM

Comments

by Manuel on February 26, 2006 07:06 PM

by Manuel on February 26, 2006 07:09 PM

by Neil Crosby on February 26, 2006 07:48 PM

by Mark van Eijk on February 26, 2006 09:51 PM

by rolandog on February 26, 2006 10:32 PM

by Marshall on February 27, 2006 03:25 AM

by Ivan Minic on February 27, 2006 04:17 AM

by Isaac Eiland-Hall on February 27, 2006 05:44 AM

by LAslo on February 27, 2006 12:20 PM

by DavidK on February 27, 2006 02:40 PM

by Neil Crosby on February 27, 2006 08:05 PM

by Alpha0 on February 27, 2006 11:48 PM

by Brian McAllister on February 28, 2006 10:19 AM

by DannyS on February 28, 2006 03:28 PM

by Ryan on February 28, 2006 05:07 PM

by Neil Crosby on February 28, 2006 07:19 PM

by nikola on March 1, 2006 08:46 PM

by Rhett Brown on March 2, 2006 08:06 PM

by Matteo on March 9, 2006 08:05 AM

by oneuser on March 10, 2006 05:12 PM

by Neil Crosby on March 10, 2006 07:55 PM

by Alagami on March 12, 2006 11:52 PM

by ketsugi on March 13, 2006 11:49 AM

by Artimus the Just on March 15, 2006 01:40 AM

by Mingyi on March 18, 2006 05:44 AM

by Julien on March 21, 2006 04:24 PM

by Neil Crosby on March 21, 2006 07:16 PM

by Saki D. on March 23, 2006 02:51 PM

by Doug on March 23, 2006 10:29 PM

by Neil Crosby on March 24, 2006 08:57 AM

by Doug on March 27, 2006 08:57 PM

by Jay Hills on March 30, 2006 11:32 AM

by Peter on March 31, 2006 02:00 AM

by Neil Crosby on March 31, 2006 06:51 AM

by Doug on April 4, 2006 02:27 PM

by Julien on April 4, 2006 02:50 PM

by olivvv on April 10, 2006 06:26 PM

by intelsoft on April 12, 2006 01:22 PM

by Dan on April 14, 2006 10:45 AM

by Doug on April 14, 2006 03:15 PM

by josh anon on April 17, 2006 07:38 PM

by Dan on April 18, 2006 11:21 AM

by Welt-Blick on April 19, 2006 05:44 PM

by Imran khan on April 20, 2006 03:27 PM

by none on April 20, 2006 04:37 PM

by DB on April 21, 2006 05:02 PM

by Andy Schworer on April 21, 2006 11:30 PM

by Andy Schworer on April 22, 2006 02:12 AM

by Neil Crosby on April 22, 2006 08:21 AM

by DB on April 24, 2006 03:39 PM

by James Strachan on April 28, 2006 08:38 AM

by Neil Crosby on April 28, 2006 08:50 AM

by Keith on May 2, 2006 03:34 PM

by Orion_bp on May 2, 2006 07:35 PM

by Neil Crosby on May 2, 2006 09:18 PM

by Jonathan on May 2, 2006 09:59 PM

by Orion_bp on May 2, 2006 11:04 PM

by Neil Crosby on May 2, 2006 11:28 PM

by Keith on May 3, 2006 02:30 PM

by Neil Crosby on May 3, 2006 07:00 PM

by Jim C on May 3, 2006 09:24 PM

by JimC on May 4, 2006 12:52 AM

by Ingo on May 8, 2006 04:38 PM