Sortable wiki tables#
This +18556394698 windows 10 online technical support Toll free number 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:
| 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 |
| 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 |
Implementation#
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 :
- 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.
Category.Documentation
