Document Actions
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.
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.
Page
1
of
2.
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:
<table class="listing" id="uniqueid">
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 class="listing"
id="sortable">
<thead>
<tr>
<th>Table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell</td>
</tr>
</tbody>
</table>
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:
<table class="listing">
or you could add nosort to the table class:
<table class="listing nosort" id="uniqueid">
or adding nosort class and removing the unique id:
<table class="listing nosort">
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:
<th class="nosort">
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.
by
Helge Tesdal
—
last modified
December 10, 2005 - 21:41
All content is copyright Plone Foundation and the individual contributors.
Not Working
I have tried every iteration of this, and I can't get my table to sort... Does there have to be some plug-in added, or a css item added, or something??