Making your tables sortable

In this tutorial, Helge Tesdal from Plone Solutions will show you how to make your tables sortable with Javascript - just by using a simple declaration.

  1. Making tables sortable using Javascript Plone includes a handy javascript to make tables sortable in the browser. The javascript is included in the standard plone headers, so you don't have to touch javascript at all. To make your tables sortable, all you have to do is follow these easy steps.
  2. Make tables sortable in Plone 2.1 Plone has a "Safe HTML" transform that filters the thead element in tables, making it impossible to create sortable tables when editing your content. Fortunately this is easy to fix.

All content on one page (useful for printing, presentation mode etc.)

 

how to mess up your table sort

Posted by tomcloyd at Nov 26, 2004 05:55 PM
I created a table, following the instructions here, containing 7 rows and 5 columns. It sorted exactly as advertised. I then inserted blank lines as spacers between rows, in the HTML, and added a bunch of comments. The sort time became so large that it was effectively broken. I removed all the comments and left in the spaces. Didn't help. I removed all the spaces. I got quick sort functionality back.

After considerable experimenting, what I learned was that comments in the HTML seem to have NO effect on the sort. Only a few blank lines, however, have considerable negative effect. YOU MUST NOT HAVE BLANK LINES IN YOUR HTML, if don't want your javascript sort to degrade unbearably.

My sortable table now works perfectly again - tons of comments, and NO blank lines!

Does not work for me

Posted by David Primmer at Feb 16, 2006 10:08 PM
I've tried it in Firefox 1.5 and IE6 and i can't get tables to sort. I've created a page and used your sample code and one with more rows and columns but when it's displayed there's no links to sort with.

oh,

Posted by David Primmer at Feb 17, 2006 05:58 AM
by the way, I'm Using Plone 2.1.2 and Zope 2.9.0

Getting sortable tables to work in Plone 2.1 (continued)

Posted by Perry Kundert at May 12, 2006 01:14 PM
(reply was truncated?!)

To get sortable tables to work in Plone 2.1, you need to add the 'thead' tag to your Plone site's portal_transforms->safe_html->valid_tags configuration. In there, add 'thead' and '1' to the table of valid HTML. After you save it, restart your zope (important!). You should have sortable tables.

"safe html" in plone 3 as well

Posted by Ned Brush at Dec 07, 2007 05:00 PM
I'm not 100% sure, but it looks like the same change required for v2.1 is also required for plone 3.

bug in plone 3

Posted by Ned Brush at Dec 07, 2007 11:46 PM
It looks like there is bug with these sortable tables in Plone 3. Every time I edit the page containing the table, something automatically tacks on another arrowup.gif and breaks the sortability of the table. I can force it to work by copying in the original source for the table every time I edit the plone document.

"table_sorter.js" in plone 3

Posted by Christof Hanke at Oct 15, 2008 12:44 PM
In the ZMI->portal_javascripts, the javascript responsible for making tables sortable hs the condition "not: portal/portal_membership/isAnonymousUser". You would need to remove that one in order to make tables sortable by anonymous users as well.

sorting dates

Posted by Michael Miller at Apr 10, 2009 04:01 PM
had issues with sorting by dates. Seems to have a problem when using slashes.

using dashes (i.e. 2009-03-21 instead of 2009/03/21) worked properly.