• View
• Edit
• History
• Attach
• Print
• Backlinks

SortableTables

Note: PmWiki 2.2.119 or later will have an optional "sortable tables" function, see PmWiki:Tables and $EnableSortable. If you enable the core function, please disable this recipe. (On this page, the recipe is enabled, and the core function is disabled.)

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/. For PHP 7.2 please use sortable72.phpΔ. Install in config.php with

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.

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 GroupCustomizations

Notes

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

Release Notes

• 2017-06-17: updated markup definition to comply with PHP 7.2
• 2015-06-12: added class for cells with negative numbers, set attribute color:red as default.
• 2015-06-11: changed bug in javascript to add negative numbers correctly.
• 2014-12-14: changes header row default styling.
• 2014-11-15: updated markup definition to comply with PHP 5.5 as well as earlier versions.
• 2009-07-20: replaces 'td' tags with 'th' in first (head) row (for prettier headings when using Table Directives) (by Rik Blok)
  • Please see the Comments section. SteP 2010-11-30
• 2008-05-12: added SUM option to automatically calculate column sum
• 2008-04-29: initial release

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See Also

Contributors

• Henrik Bechmann
• HansB
• Rik Blok?

Comments

See discussion at SortableTables-Talk SteP 2010-11-30 The javascript code that replaces TD elements with TH elements in table headers triggers an "unknown runtime error" in IE6 because the innerHTML property of TR elements is read-only by design in IE, see Microsoft KB article 239832. You can bypass the error by patching file sortable.js as follows:

  try{firstRow.innerHTML=firstRow.innerHTML.replace(/(<\/?)td(>|\s)/gi,"$1th$2");}catch(e){} // replace all 'td' tags with 'th'

This is a bypass for IE, not a fix. But I'm not even sure that replacing TD with TH is still necessary, since as of PmWiki version 2.2.11 you can use (:head:) advanced table markup to generate TH elements directly, and ||! header || for simple tables.

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

First of all, great recipe! I have a feature request. Can there be an option to sort a particular column on the initial display of the table? [DT, 2008-11-06]