Sortable wiki tables#

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.

See also Filtered Tables

Usage#

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

• When you move the mouse over the header cells, you'll see a tool-tip and a mouse pointer indicating you can click the cell.
• Click the column header to sort, click again to reverse the sort order.
• The sort algorithm will auto-guess the data type of a column: date, numeric, ip-address, currency(€$£), disk memory (2MB, 4GB, 3TB) or string.
• Note for jsp/plugin writers:
  Normally the cell text is parsed as data. However, you can add a different value for sorting by means of a cell attribute: <td sortdata="sortable-value">displayed value</td>.
  Typically, this is used for a date field, which often is rendered in a locale friendly way -- in such a case, a date value compatible with javascript, can be added as an attribute. (since v2.8.2)

    <td sortdata="Fri, 5 Oct 2007 08:16:23">05-Oct-2007 20:16</td>

• Sortable can also be combined with zebra-table.

%%zebra-table
%%sortable
|| Title || Author || Published   || Edition || Some IP@        || Expenses || Disk Memory
| book1  |  zappy  |  25 Feb 2005 |  5       |  100.100.100.100 |  €500     |  2Gb 
| book2  |  happy  |  25 Jan 2005 |  19      |  256.100.100.100 |  €1500    |  4Kb
| book3  |  pappy  |  23 Mar 2005 |  06      |  10.100.100.100  |  €50      |  1.23TB
| book4  |  dappy  |  21 Apr 2005 |  199     |  1.100.100.100   |  €0.500   |  2.73kb
| book5  |  rappy  |  25 Jul 2005 |  017     |  1.100.25.100    |  €5500    |  0.4Tb
/%
/%

Reality check:

Implementation#

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

However, the javascript was refactored completely to better fit with JSPWiki. JSPWiki tables dont use thead or tbody tags; more flexibility was needed to change the appearance of the sortAscending/sortDescending controls through css; allowing fine control in different skins; and auto-recognition of data-types has been added.

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

The onPageLoad does the initialisation after the page is loaded. 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.