How to Make Sortable Tables in Textile

One of my favorite organizational tools is Instiki. I use it for note-taking, maintaining reference information, and keeping lists. I have several lists that I keep in tables, and the other day I had need to make them sortable. Here’s how I did it.

The first thing you need is Stuart Langridge’s sorttable Javascript library. This is a library that allows you to make any table sortable, just by giving it a class of “sortable”, and a unique ID. It’s smart enough to figure out how to sort most kinds of data, so it will sort a date column as a date, and a number column as a number. Very cool piece of code. Anyway, take this Javascript file and put it in the the public/javascripts directory for your Instiki installation.

Next, start editing the page with the table that you want to make sortable. At the top add the following declaration:

<script src="/javascripts/sorttable.js"></script> 

Next we’ll modify the table. Usually tables in Textile look something like this:

 |ID|Name| |1|Joe Smith| |2|Susie Jones| |3|Bob Barker| 

We need to add a table declaration and associated modifier in order to give it a CSS class of sortable, and a unique ID:

 table(sortable#mytable) |ID|Name| |1|Joe Smith| |2|Susie Jones| |3|Bob Barker| 

The class name has to be “sortable”, but the ID (the part after the #) can be anything you want as long as it’s unique.

Save your changes, and you should now be able to sort by any column in your table.

If you enjoyed what you've read here today, please consider subscribing to my RSS Feed

blog comments powered by Disqus
,