PreviousNext…

Show ’n’ tell XII: sorting tables on the web

Show-n-tell Thursday logoWell it’s almost Thursday, so what the hell. And I haven’t published one of these in months. I am so bad. Anyway, this is more of a pointer to someone else’s code I found recently (although it has been around in its current form for some six months). It’s a solid piece of Javascript built on top of the enormously popular prototype library, and makes specified HTML tables sort-able within your browser. I’ve used other bits of code for this sort of thing before—e.g. to create sort-able tables from XML—but this code is much cleaner. In addition, it is very easily added to a Domino view, so no need for the usual "sort" arrows, server round-trips, and massive view indices!

Here’s how to implement the code:

  1. Add the SortableTable Javascript to your application’s routines (link below)
  2. Create a table in your application / web page (remember, this could be a view in Domino!)
  3. Ensure the table has an id element (and make a note of it)
  4. Add a snippet of Javascript beneath said table, as below:
<script type="text/javascript">
  var tbl = new SortableTable(document.getElementById("sort-table"),
  ["CaseInsensitiveString","CaseInsensitiveString"]);
</script>

That’s it! (In the example above, “sort-table” is the ID I gave my table). The code has an API of sorts, which lets you define sort order, sort type, etc. etc. This stuff works nicely. I tweaked the library for a couple of things in my application, and this was easy to do—the documentation is good. So, kudos to Erik Arvidsson, and here’s the link:

WebFX: Sortable Table, released under the Apache License, version 2.0.

Comments

  1. WebFX code doesn't use the Prototype library.Andrew Tetlaw#
  2. Quite right, my apologies. I have tweaked my version of the table code so that it uses prototype ($, $A, etc.), forgetting that the implementation isn’t reliant on it.

    What can I say… it was late ;-) Ben Poole#
  3. Great stuff indeed, I've been using this library in my own blog template for a while now. It does have some limitations I think, because it only sort the tables on screen. Thus if you require paging, this will only work for the page you are at. If you require multi-page sorting, an extra view is still needed I think.Ferdy#
  4. Are there any "gotchas" or modifications needed to use this with Domino? Or tweaks needed to use the files in a script library? I have a table that I am outputting with an agent (LS) via an AJAX call which returns the html. I have added references to the JS libraries in the html header, but receive the following message when I load my form:

    Error: 'SortableTable' is undefined. The debugger points to this line in the numberksorttype.js file:

    SortableTable.prototype.addSortType( "NumberK", replace8a8 );

    Joel Phelan#
  5. Nothing Domino-specific, no. But that sounds like your client can’t get a handle on the SortableTable functionality, so you need to check your JS library reference.Ben Poole#
  6. Yeah. "D'oh". I'd left off a leading slash in the script library for one of the .js files. Now I just have to get it working. Thanks.Joel Phelan#
  7. Well, I went and made one of my own that IS built on Prototype.

    http://tetlaw.id.au/view/blog/table-sorting-with-prototype/Andrew Tetlaw#

Comments on this post are now closed.

About

I’m a software architect / developer / general IT wrangler specialising in web, mobile web and middleware using things like node.js, Java, C#, PHP, HTML5 and more.

Best described as a simpleton, but kindly. You can read more here.

";