Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
png
SortHighlightFix.png 8.1 kB 1 29-Nov-2006 01:04 Ryan Sawatzky
jpg
extravanilla-sortable.jpg 19.7 kB 1 24-Oct-2005 22:56 DirkFrederickx
js
jspwiki-common.js 30.2 kB 1 14-Sep-2006 23:01 Joseph Schmigel
jpg
vanilla-sort.jpg 22.7 kB 1 24-Oct-2005 22:56 DirkFrederickx

This page (revision-39) was last changed on 14-Jan-2009 16:24 by Janne Jalkanen  

This page was created on 24-Oct-2005 22:55 by DirkFrederickx

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Difference between version and

At line 1 changed 174 lines
!!! 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.
Sortable tables are now part of the standard JSPWiki distribution, V.2.3.x.\\
Initially they appeared as part of the [BrushedTemplate].
See also other %%category [JSPWikiStyles]%%
\\-- [DF|DirkFrederickx] Nov 2005
[extravanilla-sortable.jpg]
!!Usage
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
%%
}}}
Reality check:
%%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
%%
%%tabbedSection
%%tab-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.
%%
%%tab-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.
%%
%%tab-CSS
Check out the {{templates/default/jspwiki.css}} file for the css definitions.
Folloing 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''.
%%
%%
\\
I added the ability to sort IP's in the IP dot notation. The numbers do not need to be padded with 0's for this to work correctly. I attached a new jspwiki-common.js file that includes the code if you need this feature. Just copy it over the one already in JSPWIKI/scripts directory for it to work.
Joseph Schmigel - 14.09.06
;:Tx ! Nice addition. It will take it in in the next BrushedTemplate. --[DF|DirkFrederickx]
(How) does it work if there are more than one Table on the same Page? --Manuel J. Schaffner
;:Give it a try and let us know ;-) Multiple tables should be possible --[DF|DirkFrederickx]
----
Hi, does anyone know how I can cause the table to be sorted on a particular column on page load?
--biggroover, 20-Nov-2006
;:I'm afraid the only way today is to enter the table sorted on that particular column. Allthough I think it would not be to difficult to add some default sort column parameter to the javascript. --[DF|DirkFrederickx]
----
Hi, I've made a change to the java script that will keep the highlighted rows from moving around when you sort the table. In the current jspwiki-common.js file, there is a function called Sortable.sort. At the end of this function, there is a piece of code that looks like so...
{{{
//put the sorted table back into the document
var frag = document.createDocumentFragment();
for( var i=0; i < rows.length; i++ )
{
frag.appendChild( rows[i] );
}
table.appendChild( frag );
}}}
If you change this to the following, then it will not move the highlighted rows around, when you sort.
{{{
//put the sorted table back into the document
var frag = document.createDocumentFragment();
for( var i=0; i < rows.length; i++ )
{
if( ( i % 2 ) == 0 )
rows[i].className = '';
else
rows[i].className = 'odd';
frag.appendChild( rows[i] );
}
table.appendChild( frag );
}}}
Example, compare to above "reality check", when sorted down by author.
[{Image src='SortHighlightFix.png'}]
--[Ryan|Rsawatzky] 28-Nov-2006
;:Great suggestion,tx! I'll add it to the next upload. --[DF|DirkFrederickx]
__Bug?__\\
Am I right that a sortable table cannot be combined with a zebra-table? If I'm wrong please be so kind and post an example. Thanks!
--BFT 20-Feb-2007
;:Not a bug, but missing feature. You can fix this in brushed.js, at the end of the sort function in the Sortable object. --[DF|DirkFrederickx]
{{{
//put the sorted table back into the document
var frag = document.createDocumentFragment();
for( var i=0; i < rows.length; i++ )
{
rows[i].className = ( (i%2) == 0 ) ? '' : 'odd'; // new line to save zebra-tables
frag.appendChild( rows[i] );
}
}}}
;:I've done the changes. Everything works fine. Thank you very much! --BFT 21-Feb-2007
----
__Sort order bug__\\
It seems the sort is done as a pure ASCII sort, rather than a lexigraphical sort. This has two consequences:
# All upper case letters come before lower case letters (e.g. "Z" comes before "a").\\''This might be fixed by making the sort case-insensitive - sort on a lowercase conversion of the cell value.''
# International characters (ISO-8859-1/Unicode > 128) are sorted in a "random" way).\\This one would require a {{[java.text.Collator|http://java.sun.com/j2se/1.5.0/docs/api/java/text/Collator.html]}} equivalent to handle, possibly including a way to set the appropriate Locale. Something that may be impossible using JavaScript.
Examples of sort order:
%%sortable
||Sortable||Comment
|a|(none)
|z|(none)
|Z|(none)
|æ|(danish letter which should appear after "z")
|aa|(in danish/norwegian collation, this also comes after "z"/"æ")
%%
''(mind you, as of 2007-03-11, the sortable feature is not enabled in the [http://www.jspwiki.org/wiki/], although it is in the [Sandbox|http://sandbox.jspwiki.org/Wiki.jsp])''\\
-- [Morten Hattesen]
----
See [SortableTables]
Version Date Modified Size Author Changes ... Change note
39 14-Jan-2009 16:24 0.022 kB Janne Jalkanen to previous removed garbage
38 14-Jan-2009 15:02 0.045 kB 195.65.251.71 to previous | to last
37 14-Jan-2009 15:02 0.041 kB 195.65.251.71 to previous | to last
36 08-Feb-2008 23:42 0.022 kB 84.194.120.87 to previous | to last Remove spam
35 08-Feb-2008 23:26 0.04 kB 71.133.206.3 to previous | to last
34 20-Nov-2007 22:02 0.022 kB DirkFrederickx to previous | to last
33 20-Nov-2007 22:02 0.021 kB DirkFrederickx to previous | to last
32 20-Oct-2007 19:39 7.766 kB 151.83.15.188 to previous | to last
31 20-Oct-2007 19:37 7.816 kB 151.83.15.188 to previous | to last
30 11-Mar-2007 04:40 7.766 kB Morten Hattesen to previous | to last
29 11-Mar-2007 04:39 7.803 kB Morten Hattesen to previous | to last
28 11-Mar-2007 04:19 7.766 kB Morten Hattesen to previous | to last
27 11-Mar-2007 04:17 7.678 kB Morten Hattesen to previous | to last
26 11-Mar-2007 03:59 7.562 kB Morten Hattesen to previous | to last
25 11-Mar-2007 03:57 7.691 kB Morten Hattesen to previous | to last
24 21-Feb-2007 10:01 6.607 kB null to previous | to last
23 21-Feb-2007 08:14 6.515 kB DirkFrederickx to previous | to last Reply BFT
22 20-Feb-2007 16:03 6.073 kB null to previous | to last
21 20-Feb-2007 15:55 6.061 kB 141.77.225.60 to previous | to last
« This page (revision-39) was last changed on 14-Jan-2009 16:24 by Janne Jalkanen