Making tables sortable using Javascript

by Helge Tesdal — last modified Mar 24, 2009 10:59 PM

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. Next: Make tables sortable in Plone 2.1