Remote Synthesis
Search my blog:
Viewing By Entry / Main
May 09, 2006

Sortable Tables Custom Tag Updated

Posted On : 05/09/2006 at 10:49 AM | Posted By : Remote Synthesis
Related Categories: ColdFusion, JavaScript, Programming

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)
You can see an example here.

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 (8) | del.icio.us | Linking Blogs

Comments
Ryan Guill
Have you tested performance of the javascript with large recordsets (say over 5000 &quot;cells&quot; 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
Patrick Whittingham
Your edit &amp; delete link go boom

Posted By Patrick Whittingham / Posted on 05/09/2006 at 11:36 AM
Brian Rinaldi
Ryan, I have not tested it on large recordsets, but I believe the WebFX site has a large recordset test that may be worth checking out. Let me know and I will assist in incorporating it in qBrowser if you like.

Patrick, yeah links those are there for example. I don't actually want anyone editing or deleting my blog categories ;)

Posted By Brian Rinaldi / Posted on 05/09/2006 at 2:28 PM
Matt Williams
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
Jeff Coughlin
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
Dan
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
Dan
At the very end of the tag the following line should be added

&lt;cfsetting enablecfoutputonly=&quot;false&quot;&gt;

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
Brian Rinaldi
Thanks Dan. The code has been updated.

Posted By Brian Rinaldi / Posted on 06/25/2006 at 12:17 PM

Write your comment



(it will not be displayed)