A programmer's tale

Sortable tables in XML blocks

April 13th, 2007

Xavier Dutoit once pointed me to a nice unobtrusive table sort script written by Frequency Decoder. I will explain you how you can use it with the tables inserted in an XML block attribute.

First download the tablesort.js file from Frequency Decoder’s site. Unfortunately the table sort script does not work correctly without a thead element around the table header row: the header row will also move when sorting the table data rows. it’s not possible to insert a thead element in a XML text block, so a little modification to the script is required to make it work properly (see my comment on Frequency Decoder’s article). Put the modified script in the javascript directory of one of your site designs.

Next, we need to specify that we want to load the table sort script in our page layout. Add this to design.ini.append.php:

[JavaScriptSettings]
JavaScriptList[]=tablesort.js

Finally, we need to add the classes that will trigger the sorting behavior to the list of available classes for the th element. Add this to content.ini.append.php:

[th]
AvailableClasses[]=sortable
AvailableClasses[]=sortable-numeric
AvailableClasses[]=sortable-currency
AvailableClasses[]=sortable-text
AvailableClasses[]=sortable-date
AvailableClasses[]=sortable-date-dmy
AvailableClasses[]=sortable-keep
ClassDescription[sortable]=Sortable auto
ClassDescription[sortable-numeric]=Sortable numeric
ClassDescription[sortable-currency]=Sortable currency
ClassDescription[sortable-text]=Sortable text (case-insensitive)
ClassDescription[sortable-date]=Sortable American date (mm-dd-yyyy)
ClassDescription[sortable-date-dmy]=Sortable European date (dd-mm-yyyy)
ClassDescription[sortable-keep]=Sortable keep current order

The sort script supports the classes specified above by default. But you can also add your own custom sorting functions to this list. Please read Frequency Decoder’s article for more information on how to add custom sorting functions.

Now edit or create a content object with a XML block attribute, add a table with table headers and add the desired sortable class to your table headers. For more info on how to do this, read the table section of the eZ publish XML tags reference documentation or the working with tables section of the Online Editor documentation. Publish the object, and your table will be sortable.

Thanks Xavier!

Entry Filed under: JavaScript,eZ Publish