PmWiki | Cookbook / SortableTables

Summary: Create tables which can be sorted instantly by javascript

Version: 2008-05-12

Prerequisites:

Status: new

Maintainer:

Categories: Markup UpdateMe

Download: sortable.zip Δ

Questions answered by this recipe

How can I have my wiki tables sortable?

Description

Create sortable tables in pmwiki using javascript.

Download sortable.zip Δ, unzip and copy sortable.php to the cookbook folder, all other files (sortable.js and arrow image files) to a folder pub/sortable/. Install in config.php with

include_once('cookbook/sortable.php');

Load javascript for a table in a page with markup (:sortable:). you can add a number of parameters to this markup in order to change the styling, background row colors, heading row font color, sort arrow color, date type etc.

Create a table using simple table markup. Add class=sortable and an id like id=sometable to the first table markup line.
Example:

(:sortable:)
||class=sortable id=thetable
||!First Column ||!Second ||!Third||!Fourth ||%colnosort%'''Fifth''' ||
||20	||y  	||05 May 2005	|| 	        ||Row  ||
||14	||w  	||06 Apr 20050 	|| € 4.25||Unsortable ||
||1.5 	||Z 	||06-02-2004 	|| € 5.00||This 	||
||3.75 	||X 	||aug 17 2006 	|| € 6.45||Is 	||
||%rownosort%SUM 	||Fixed 	||Row	|| total € CURSUM||See? 	||

%colnosort%: Adding %colnosort% to the heading cell will make the heading non-clickable and non-sortable, but do not use ! to make this cell into a heading cell (<hd> HTML tag)!
%rownosort%: Adding %rownosort% to a bottom row cell will make the bottom row non-sortable, i.e. it will remain bottom row. Useful to display totals etc.
SUM: in a bottom row designated with a cell which has SUM as its value will display the sum of the numeric values of that column. Any string before SUm and after SUM will also be shown.
CURSUM: as SUM, but formatted with two decimal places, primarily for use in currency sums.

Note that all numbers (digits, decimal point and post decimal digits) in a column will be summed, even if the number has a preceding string, or a following string. For instance it is possible to use numbers with currency symbols or other text.

Optional parameters for (:sortable:) markup:

date=us - non-european date type for sorting by date. Default is 'eu'
oddrowbg=colourcode - background color for odd rows. Default is '#f3f3f3'.
evenrowbg=colourcode - background color for even rows. Default is '#e8e8e8'.
headerrowbg=colourcode - background color for header row. Default is '#bbb'.
bottomrowbg=colourcode - background color for bottom row (marked with style %rownosort%). Default is '#d6d6d6'.
arrows=black or arrows=gray - alternative arrow colors. Default is white.
headerrow=colourcode - header row font color. Default is white.
altrowbg=0 - do not show alternative row background colors. Default is 1.

Example: (:sortable headerrow=#000 headerrowbg=#efe arrows=black :)

Note: Markup(:sortable:) will load the javascript and the styles. These will be applied to all tables in the page content which have class=sortable. You cannot put this into a SideBar or other subpage, it needs to be in the main page content.

Live example: http://softflow.org/design/Test/SortableTable

Previous (non-recipe script) Instructions

1. Go to http://www.joostdevalk.nl/code/sortable-table/
Issue: The current version of the author's javascript sorts dates alphabetically, not by date.
2. Download the javascript file from the above link (right click, "Save Link As..." on "Just the script, unzipped (9kb)"
3. Upload that file to your server, to wiki/pub/sortable/sortable.js
4. Create a file called Experiments.Sortable.php (ie a file that corresponds in name to the wiki page where you have the sortable table, plus the ".php" extension).
5. In that file type (or copy in) the following:

      <?php

      $HTMLHeaderFmt['sortable'] =  '<script type="text/javascript" 
      src="pub/sortable/sortable.js"></script>
      <style type="text/css">
      .even {
       background-color:#ccc;
      }
      .odd {
       background-color:white;
      }
      </style>';

6. Upload Experiments.Sortable.php to your wiki/local directory
7. Create a wiki page called Experiments.Sortable (ie a page corresponding in name to the file created in step 4.)
8. Add the following wiki text to your wiki page:

      ||class=sortable id=thetable
      || First Column || Second Column || Third Column  ||
      || One          || 1             || North America ||
      || Two          || 2             || South America ||
      || Three        || 3             || Europe        ||
      || Four         || 4             || Africa        ||
      || Five         || 5             || Australia     ||

9. Enjoy!

Make variations as appropriate. To make the sortable tables available on all pages, place content of item 5 in local/config.php. For a group, in local/Group.php. See PerGroupCustomizations

Notes

See http://pmichaud.com/pipermail/pmwiki-users/2008-April/050593.html (please follow the whole thread) for more.

Release Notes

2008-05-12: added SUM option to automatically calculate column sum
2008-04-29: initial release

Contributors

Comments

I was able to get the original sortable recipe to work, but this one isn't. I removed all previous sortable files. The header and footer rows display proper colors, but no arrows. The oddrowbg and evenrowbg colors are not working either. I used Hans' sample table to try this out. I'm running 2.2.0-beta57 on CentOS 4. I downloaded the 4/30/08 zip. Thanks. Scott Smith 2008-05-01.

Follow-upYou are right: I didn't put the sortable folder in the Farm pub. Thanks for the help. Scott Smith 2008-05-06.
A:try latest version 2008-04-29. Check that you got the right paths for images and js script by looking at the HTML page source, head section. Check that images are in pub/sortable/ folder. Check for possible confusion between pub/ and farm pub/. Force the browser to reload everything fresh (Ctrl-F5 on Windows). HansB May 02, 2008, at 05:40 PM

SortableTables