remote
     synthesis

Sortable Tables Custom Tag Updated

Posted on May 09, 2006

Someone at work started using a tag that I had ignored for a while that uses the Web FX Sortable Table javascript to allow customized table sorting without page refreshes (see my previous post here). The thing is that this tag wasn't very customizable - it was done as a quickie solution.

The updated version of the tag now includes the following features:

• specify a list of columns to include
• specify a list of column headers
• alternating row colors
• the ability to include additional links and link text for each row (i.e. no longer only edit/delete)

The tag only requires a query and an id column to function. Here the code for the example:

<cfmodule template="sortabletable.cfm"    query="#query#"    idColumn="categoryid"    columns="categoryName,blog"    headers="Category,Blog"    links="edit^edit.cfm|delete^delete.cfm" />

Because this tag uses query metadata, it will only work on CF7. As a reminder, it assumes that you have already included the necessary files to make the sortable tables work.

!-- sortable includes --> <script type="text/javascript" src="/admin/js/sortabletable.js"></script> <link type="text/css" rel="StyleSheet" href="/admin/css/sortabletable.css" />

Special thanks to my coworker, Glenn Gervais, who contributed to the code. Also, thanks to Dan Vega for his ideas in the comments of my last post (most of which I included). Please let me know if you encounter any bugs.

Download the attachment.

Comments

Have you tested performance of the javascript with large recordsets (say over 5000 "cells" returned)? It may be a nice addition to qBrowser, the current javascript version I use for the sortable tables gets noticably slow after that point so I disable it if you are bringing back larger recordsets. I would also have to code around it being cfmx 7+ but if it is an useful addition it would be worth it, i think most of the people using it are on 7.

Posted By Ryan Guill / Posted on 05/09/2006 at 10:54 AM

Your edit & delete link go boom

Posted By Patrick Whittingham / Posted on 05/09/2006 at 11:36 AM

This looks pretty cool. A few things I'd like to see (could try to do it myself, if time allows):
--Ability for entire row to be the link, not just the one word in one column.
--Better control over width and height. I generally use a div with 'overflow:auto' so scroll bars show up.

Posted By Matt Williams / Posted on 05/09/2006 at 3:30 PM

This javascript is great. I've been using it for a couple years now on projects but haven't seen a CF custom tag made from it. Great job!

Posted By Jeff Coughlin / Posted on 05/11/2006 at 11:38 AM

This is such a great tag, great job and thanks for the hard work!

Posted By Dan / Posted on 05/15/2006 at 8:53 AM

At the very end of the tag the following line should be added

<cfsetting enablecfoutputonly="false">

I am not sure if this was happening to anyone else but all output after the table was being supressed.

Posted By Dan / Posted on 06/23/2006 at 3:29 PM