Sorting CSS Classes

When table sorting is enable clicking on the column heading will sort the records on the current page by the values in the column. This results in several changes to the table structure.

The first change is that one of two classes is added to the column heading, one the first click the class etAscending is added. A subsequent click will change the class to etDescending, with the class alternating between the two on subsequent clicks.

The second change is that a property is added to the column heading called sortdir, with subsequent clicks this property alternates between values of "down" and "up". This property is used by the Javascript as a reference for the sorting process.

The final change of course is that records are re-ordered by the Javascript.

Once a table column has been clicked it's HTML will look something like this example taken from the Presidents table on our demonstration website.

To style the column headings you will need to do several things

1. create matching classes in your templates CSS file.
   (Luckily Joomla lets you edit the CSS of your template via the Template Manager)
2. find/create suitable graphics to indicate sort direction
   (Again, Joomla's standard installation includes a set of sort indicator icons) 
3. determine any other attributes you may need to modify for your specific template.

To help you with this process - the CSS we use on our demonstration website is provided below and uses the standard icon's mentioned.

Example CSS

The following example CSS has been added to the end of the JA Purity template CSS on our demonstration website and can be seen working on the US Presidents table.