!!! Sortable wiki tables

This %%category [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.
Initially they appeared as part of the [BrushedTemplate]. 
\\-- [DF|DirkFrederickx] Nov 2005, Sep 07

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|ZebraTableStyle].

{{{
%%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:
%%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
/%
/%
%%zebra
%%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
/%
/%

%%collapsebox-closed
!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|JSPWikiSkinDesign]; 
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 :
# Validate the header row and checking which column was clicked
# 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
# Do the actual sort or reverse sort
# 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''. 
/%



----

Sorting doesn't work on AlphaNumeric, it expects number only

--AnonymousCoward, 29-Jul-2009 17:51
;: Fixed in v2.8.3-svn-11. -- [DF|DirkFrederickx]




----

Still having problem with sortable, try the "Reality Check" above

--AnonymousCoward, 06-Aug-2009 19:09


----

To the comment above: try sorting books or authors: it won't sort correctly. In IE (v6 and v7) it does not work at all.

--AndrasBalogh, 07-Aug-2009 16:26


----

This sorting issue has been [fixed in 2.8.3-svn-11|https://issues.apache.org/jira/browse/JSPWIKI-581], maybe Janne can activate this release on jspwiki.org sometime.

--Harry Metske, 07-Aug-2009 19:33

----

Can I have sortable tables by default? [AnswerMe]

--pihentagy, 15-Apr-2010 11:33
;:Nope. Tables only become sortable inside a %~%sortable block. --[DF|DirkFrederickx]


----

Does not function at all in Chrome 14

--AnonymousCoward, 11-Aug-2011 21:11


----

That does not work with modern browsers (IE 9, Firefox 6+, about Firefox 5 I'm not sure anymore, Google Chrome 14 (see above)).\\
It does work fine in Safari 5.1 and Opera 11.51.

They cause javascript errors:
* IE 9: %%(color: red)SCRIPT5007: Für die Eigenschaft "filterStack" kann kein Wert abgerufen werden: Das Objekt ist Null oder undefiniert%%\\jspwiki-common.js, Zeile 1 Zeichen 25049\\{{sort:function(a){var h=getAncestorByTagName(a,"table"),b=(h.%%(color:red)filterStack%%)}}
* FF: Fehler: __h is null__\\Quelldatei: scripts/jspwiki-common.js\\Zeile: 1
* Google Chrome: %%(color: red)Type Error: Cannot call method 'test' of undefined [[http://www.jspwiki.org/scripts/jspwiki-common.js:1]\\Type Error: Cannot read property 'filterStack' of null [[http://www.jspwiki.org/scripts/jspwiki-common.js:1]%%

(sorry for the German error messages. But I think, they're understandable)

For me it seems, these errors are very close to each other. Maybe it's only one.

I tried to upgrade to a newer mootools library (1.4, 1.25) but that didn't work at all.

--Rainer H. Schwandt, 05-Okt-2011 13:04