Sortable wiki tables#

Introduction#

This JSPWikiStyle allows you to make tables sortable by enclosing them inside a %%sortable block. Just click the column header and your table is sorted without round-trip to the server.

Sortable tables are now part of the standard JSPWiki distribution, V.2.3.x.

See also Filtered Tables

vanilla-sort.jpg

Usage#

Enclose your tables in %%sortable tags. Make sure your table starts with a row of header cells ( wikisyntax: || ).

Wen you move the mouse over the header cells, you'll see a tool-tip and a changed mouse pointer. Click the column header to sort, clicking again will reverse the sort order. The sort algorithm will auto-guess the data type of your column: date, numeric, ip-address, currency or string.

%%sortable
|| Title || Author || Published   || Edition || Some IP@        || Expenses
| book1  |  zappy  |  25 Feb 2005 |  5       |  100.100.100.100 |  €500
| book2  |  happy  |  25 Jan 2005 |  19      |  256.100.100.100 |  €1500
| book3  |  pappy  |  23 Mar 2005 |  06      |  10.100.100.100  |  €50
| book4  |  dappy  |  21 Apr 2005 |  199     |  1.100.100.100   |  €0.500
| book5  |  rappy  |  25 Jul 2005 |  017     |  1.100.25.100    |  €5500
/%

Reality check:

Title Author Published Edition Some IP@ Expenses
book1 zappy 25 Feb 2005 5 100.100.100.100 €500
book2 happy 25 Jan 2005 19 256.100.100.100 €1500
book3 pappy 23 Mar 2005 06 10.100.100.100 €50
book4 dappy 21 Apr 2005 199 1.100.100.100 €0.500
book5 rappy 25 Jul 2005 017 1.100.25.100 €5500
no zebra
Title Author Published Edition Some IP@ Expenses
book1 zappy 25 Feb 2005 5 100.100.100.100 €500
book2 happy 25 Jan 2005 19 256.100.100.100 €1500
book3 pappy 23 Mar 2005 06 10.100.100.100 €50
book4 dappy 21 Apr 2005 199 1.100.100.100 €0.500
book5 rappy 25 Jul 2005 017 1.100.25.100 €5500
Title Author Published Edition Some IP@ Expenses
book1 zappy 25 Feb 2005 5 100.100.100.100 €500
book2 happy 25 Jan 2005 19 256.100.100.100 €1500
book3 pappy 23 Mar 2005 06 10.100.100.100 €50
book4 dappy 21 Apr 2005 199 1.100.100.100 €0.500
book5 rappy 25 Jul 2005 017 1.100.25.100 €5500
Title Author Published Edition
my book comedy 25-Jul-2005 013
that other book tragedy 26-Jul-2005 3.141592
book1 zappy 25-Feb-2005 5
book2 happy 25-Jan-2005 19
book3 pappy 23-Mar-2005 06
book4 dappy 21-Apr-2005 199
book5 rappy 25-Jul-2005 017

Implementation#

The implementation was inspired by the excellent javascript created by Erik Arvidsson. See http://webfx.eae.net/dhtml/sortabletable/sortabletable.html.

However, I refactored it completely so it better fits with JSPWiki pages. JSPWiki tables dont use thead or tbody tags; it needed to be more flexible to change the appearance of the sortAscending/sortDescending controls through css; allowing fine control in different skins; and I wanted automatic recognition of the data-type of the column to be sorted.

Javascript#

Check out the scripts/jspwiki-common.js file for the actual implementation.

The needed javascript is very powerful, and still pretty small. Everything is included in the Sortable object to keep the .js namespace unpolluted.

The onPageLoad does the initialisation after the page is loaded. (make sure to add a call to this function in your window.onload() handler somewhere) It will track all %%sortable elements and process its first TABLE element. An onclick() handler is added to each column header which points to the heart of the javascript: the Sortable.sort() function.

The sort function has four major steps :

  1. Validate the header row and checking which column was clicked
  2. Copy the table body rows into a javascript array and at the same time find out the data-type of the column to be sorted being date, number or (default) string format
  3. Do the actual sort or reverse sort
  4. Put the sorted array back into the DOM tree of the document

The Sortable.convert() and Sortable.createCompare() are helper functions for data-type conversion and for creation of appropriate comparsion routines used by the javascript sort engine.

CSS#

Check out the templates/default/jspwiki.css file for the css definitions.

Following CSS selectors can be changed if needed:

  • column headers which are clickable, but not yet sorted, get the style .sort
  • column headers, which are sorted ascending, get the style .sortAscending.
  • column headers, which are sorted descending, get the style .sortDescending.

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-2) was last changed on 24-Nov-2008 14:02 by jim