This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note

Page References

Incoming links Outgoing links
Sortable Tables
Sortable Tables

Version management

Difference between version and

At line 1 added 126 lines
!!! Sortable wiki tables
%%tabbedSection
%%tab-Introduction
!!Introduction
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.
See also [Filtered Tables]
[vanilla-sort.jpg]
/%
%%tab-Usage
!!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:
%%zebra-table
%%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
/%
/%
no zebra
%%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
/%
%%zebra-lime-3366FF
%%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
/%
/%
%%sortable
|| 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
%%
/%
%%tab-Implementation
!!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|BrushedTemplateSkin]; 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 :
# 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''.
/%
/%
This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthorTop