|
Cookbook /
SortableTablesSummary: Create tables which can be sorted instantly by javascript
Version: 2009-07-20
Prerequisites:
Status: new
Maintainer:
Download: sortable.zipΔ
Discussion: SortableTables-Talk
Questions answered by this recipeHow can I have my wiki tables sortable? DescriptionCreate 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 Create a table using simple table markup. Add class=sortable and an id like id=sometable to the first table markup line.
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
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) Instructions1. Go to http://www.joostdevalk.nl/code/sortable-table/
<?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
||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 NotesSee http://pmichaud.com/pipermail/pmwiki-users/2008-April/050593.html (please follow the whole thread) for more. Release Notes
See AlsoContributorsCommentsSee 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 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. 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] User notes +4: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki. |