Sortable Tables Custom Tag

I have been using Web FX Sortable Table javascript to create table lists that can be sorted without requiring a page refresh. One of the nice things about this script is that it allows you to specify a data type for a column to help it determine the manner in which to sort a column. It also allows you to specify a column not be sortable (for example columns that may simply contain a link). I just finished wrapping most of the functionality necessary to accomplish this in a custom tag (click the download link)Getting Started
The custom tag assumes that you have already included the necessary files to make the sortable tables work. The following code should go in the head section of your page:

<!-- sortable includes -->
<&#115;cript type="text/javascript" src="/admin/js/sortabletable.js">
</&#115;cript>
<link type="text/css" rel="StyleSheet" href="/admin/css/sortabletable.css" />

One thing I dealt with regarding the included script is that it uses some images to generate the directional arrow on a sorted row. You may need to modify the javascript yourself to account for the location of that image on your site.

Using the Custom Tag
The only required attributes to the tag are the query to fill the table with and the idcolumn in that query. So, at a minimum, you could implement the sortabel table like this:

<cfmodule template="/admin/tags/sortabletable.cfm" query="#query#" idColumn="id" />

By default the tag will include edit and delete links based upon the query id. You can specify the page to link to for these or to disable these you can do the following:

<cfmodule template="/admin/tags/sortabletable.cfm" query="#query#" idColumn="id" editLink="" deleteLink="" />

By default, the tag will not show the id column in the list. You can set the addibute showID="true" if you would like the id column to appear.

The tag uses the getMetadata() function to determine how to sort columns. It then converts the data types to the four types that can be sorted (CaseInsensitiveString,String,Date,Number) or to a non-sortable column (None). I have tested this on MS SQL, but my guess is that this function will need to be edited for other types of databases since it uses MS SQL data types to perform the conversion.

I also set a caller value (sortableTableNumericID). This allows you to include multiple sortable tables on a single page, and each can be sorted independently.

Going Forward
I would like to test this on other database systems and modify the convertDataType function to accomodate the metadata (if necessary). Also, I just wrote this and I am sure there will be bugs (please let me know if you find any).

Download the attachment.

Brian,

Cool job! I'll be trying it out.

Sami

http://www.kryogenix.org/code/browser/sorttable/

I like the above sort table function better, it looks nicer and only requires minor alterations to code.

I am using MS SQL and I am getting this error when calling the tag

Element QUERY.GROUPID is undefined in ATTRIBUTES. Any idea why?
Also, great work on the tag i think the only key addition is to be able to specify the columns you want to include. This way you can limit the table to the data you want. Just a thought.

Thanks for the update, i think a columnList and columnHeaderList would work out nice that way you could have nice column headers instead of what comes from the database. Also for your edit and delete columns you can't leave them totaly blank or it comes out wierd. I usually put the titles edit and delete but at the very least it should have   to tell the cell something is there

<cfif len(attributes.editLink)>
<td>Edit</td>
</cfif>
<cfif len(attributes.deleteLink)>
<td>Delete</td>
</cfif>

Ok, whipped up a quick new version just because this tag is helpful - I use those tables alot at work. You can download my ver from www.danvega.org/sortabletable.zip. It adds a few things as attributes

1.) columnList= the list of columns you want to include in the table. If you do not pass it a list it will use all
2.) columnLabels = column label nuff said
3.) editImage,deleteImage - i like using images in those columns so I included those.

Also in your columnList you can do this
columnList="plate,primaryCoat,coat,plateThick,ws@date,rr@date"

The @ symbol tells us that this field needs special formating in the table. Right now the only possible format type is date.

I threw this together very quickly so if anything comes up email me at danvega at gmail dot com.

Hope it helps!!

Brian,
One more thing, I updated the zip to include odd row colors. I use the same even/odd colors all the time but you can change it just by changing the style. Also the tag itself needed to be updated so that when rows are change the alternate row colors get updated.

If anyone is using this and the dates are not sorting correctly then you need to change the date parser in the sortabletable.js file. The following will parse us dates and in return sort columns correctly.

SortableTable.toDate = function (s) {
   var parts = s.split("/");
   var d = new Date(0);
   d.setFullYear(parts[2]);
   d.setDate(parts[1]);
   d.setMonth(parts[0]);
   return d.valueOf();
};

hope this helps everyone, again great tag Brian!

http://www.kryogenix.org/code/browser/sorttable/

I tried this one out, but on a table that originally had alternating row colors, after the sort they are messed up. Since being a javascript guru is way from my reach I'm hoping some will write an update to this script or point me to an auxillary script which will tie the two together.

-Inet

This code seems to only work on CFMX7.... When I try to use CreateObject() to reference a cfc, the getMetaData() fuction returns the java.obj.class specification and no the data set. Is there something that I am missing?