CyloSort V_0.1 Allow your users to sort the contents of tabular data. You can sort things from dates, strings and numbers. You can even sort by image size if you have a column of images. You can specify a max number of rows which will result in a paginated interface. Try it out. WARNING:: Script is currently unfinished

You can also have footers.
You can also sort by image. The script will work out the area of each image and sort by size

To use CyloSort, include the script in your page using ...

<script type="text/javascript" src='js/CyloSort.js'></script>
		<link href="css/cylo.css" rel="stylesheet" type="text/css"/>	
		

You need to set some attributes directly to your tables to make this work!

1. For each table you want sortable add CyloSort to the class attribute. e.g

class=' CyloSort excel'

To tell the script how many results per page to use simply use the following syntax

class=' CyloSort[6] excel'

In this case the scriptt will allow 6 rows per page. 2. Add a sort type class definition to each sortable header in the table like this...

<tr>
	<th scope="col"class=' CyloSortHREF '>Design Name</th>
	<th scope="col"class=' CyloSortHREF '>Author</th>
	<th scope="col"class=' CyloSortString '>Country</th>
	<th scope="col"class=' CyloSortString '>Comment</th>
	<th scope="col"class=' CyloSortHREF '>Download</th>
</tr>

In the above code, 3 of the headers are sorted using the HREF type. This is because the contents of these columns will be links, but I want to sort on the clickable text of the link. The other 2 are common strings.
Other posibilities are

CyloSortNumber

Sort by number. Non-numbers are turned into minus infinity

CyloSortDateUK

Sort by UK date. The date format is worked out dynamically. See code for supported formats and add your own

CyloSortDateUS

Same as above but for US dates

CyloSortImageSize

Sort by image area

CyloSortImageSRC

Sort by the URL of the image in alphabetical order

3. To automatically sort on a particular column, add CyloSortTrue to the class attribute of the desired column.

4. In the body tag onload event, add

CyloSort.Go();

which will loop through the tables on the page and check for the CyloSort class in the classname.

---

FEATURES!

1. You can mix it with CyloTables to make the column draggable.

---

THINGS TO BE AWARE OF!

1. If rows are not of the same height an pagination is used, the overall table height jumps around a bit.

2. Care should be taken when using dates. Look at the code to see which formats are supported.

---

COMMENT ON THIS PLUG-IN

If you'd like to leave some feed back or would like to request a feature, please drop me a line on this Google group ...

http://groups.google.com/group/cylo-web-tools?hl=en