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.
Enclose your tables in %%sortable tags. Make sure your table starts with a row of all header cells ( wikisyntax: || ). Now move your the mouse over one of the clickable 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 or string -- and adjust the sorting algorithm accordingly !
%%sortable || Title || Author || Published || Edition | 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 | my book | comedy | 25-Jul-2005 | 013 %%
No Header - Still Sorts?
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.
The sort function has four major steps :
- Validate the header row and checking which column was clicked
- Do the actual sort or reverse sort
- Put the sorted array back into the DOM tree of the document
The following CSS selectors can be changed if needed:
- column headers which are clicable, 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.