| At line 1 changed 176 lines |
| [{SET alias='SortableWikiTables'}] |
| !!! 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 (press "Sortable" header to see actual 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"/"æ"\\and is equivalent to the letter "å" |
| |å|in danish collation, this letter is the last in the alphabet (equiv. to "aa") |
| %% |
| Correct sort order of above table, with "Danish" locale: "a", "Z"/"z", "æ", "aa"/"å"\\ |
| -- [Morten Hattesen] |
| ---- |
| See [SortableTables] |
