Making your tables sortable

« Return to page index

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.

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.

Get the table class and id right To be sortable, a table needs to have its class set to 'listing', and to have an unique id. Ids should be unique anyway:: Get the table structure right You have to use thead and tbody to contain headers and cells. A complete sortable table is shown below::
Table header
Table cell
What if I don't want to sort the table? If you don't want to sort your table, but still want to use the listing class for layout, the simplest thing to do is not giving the table an id:: or you could add 'nosort' to the table class::
or adding 'nosort' class and removing the unique id::
What if I don't want certain columns to be sortable? Set the table header class to 'nosort' in the table header of the column you don't want to sort::
Can I have more than one sortable table on a page? Sure you can. That is why the id of each table has to be uniqe. All tables of class 'listing' with unique ids will be sortable.

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.

  • Go to the 'site setup' and click the Zope Management Interface.


  • Find the portal_transforms in the list of content and tools.

portal_transforms

  • Once in the 'portal_transforms', go to the 'safe_html'
  • In there, add 'thead' and '1' to the table of valid HTML. 

thead

  • After you save it, restart your zope.  You should have sortable tables!