Unobtrusive Table Sort Solution

Posted At : March 1, 2007 4:30 PM | Posted By : Robert
Related Categories: Javascript / Ajax

Looking for a good dynamic table sorting solution? We have been playing with a few out there including spry and well we think we have found a goodie.

We thought we would take a sec to explain how we integrated it into an app. Whats great about this implementation is it is totally unobtrusive and could be implemented site-wide with ease.

We included the two javascript files that you can downloaded at the bottom of http://www.frequency-decoder.com/ blog entry.

The first script can run without the second script if you don't require page numbering however i would highly recommend it.

<script type="text/javascript" src="js/tablesort.js"></script>
<script type="text/javascript" src="js/pageNumber.js"></script>

Now simply create your table and its all about the class, we have tested with more than one table and it was absolutely fine..

<table id="anotherTable" cellpadding="0" cellspacing="0" class="sortable-onload-3-reverse rowstyle-alternative no-arrow paginate-7">

Its all about the class which its pretty clever. To breakdown what we have worked out each parameter means

  • sortable(pretty clear) - onload-3-reverse (sort column three in reverse)
  • rowstyle-alternative (pretty clear)
  • paginate-7 (how many records to show on a page)

Now simply create the rest of your table defining which columns you want to sort by

<thead>
         <tr>
            <th class="sortable">Name</th>
            <th class="sortable">Level</th>
            <th class="sortable">Username/Email</th>
            <th class="sortable">Password</th>
            <th>Edit</th>
            <th>Delete</th>
         </tr>
      </thead>
    <tbody>   
      <cfloop query="qgetUser">
         <tr>
            <td>#qgetUser.lastname#, #qgetUser.FirstName#</td>
            <td>#oU.getLevel(qgetUser.level)#</td>
            <td>#qgetUser.email#</td>
            <td>#qgetUser.password#</td>
            <td><a href="?edit=#qgetUser.uid#">Edit</a></td>
            <td><a href="?deleteUser=#qgetUser.uid#">Delete</a></td>
         </tr>
      </cfloop>
   </tbody>
   </table>

We have done some load testing and as the author explains there are a number of things that will slow this down including having ALOT of records. However the wait was totally acceptable with a thousand or so records. Hopes this helps and if all goes well and we can find sometime look forward to an update to our datagrid solution.

Comments (12) | Print | del.icio.us | Linking Blogs | 3162 Views
Comments
[Add Comment]
Brian Rinaldi's Gravatar Have you tried my sortable tables custom tag? It uses a solution that allows you to customize sorts by different data types. It also has built in support for alternating row colors and works very nicely (and fast) on large datasets.

Anyway, you might want to check it out - http://www.remotesynthesis.com/blog/projects.cfm
# Posted By Brian Rinaldi | 3/2/07 12:29 AM
Josen Ruiseco's Gravatar Brian,

Your example page is broken on your site...

Josen
# Posted By Josen Ruiseco | 3/2/07 3:11 AM
Brian Rinaldi's Gravatar Sorry, was just a relic of moving from Windows to Linux, the link had some case-sensitivity issues. Fixed.
# Posted By Brian Rinaldi | 3/2/07 3:22 AM
karm's Gravatar Looking for a good dynamic table sorting solution? We have been playing with a few out there including spry and well we think we have found a goodie.
http://www.batteryfast.com/asus/m6-silver.htm asus m6 silver battery,
http://www.batteryfast.com/asus/w1000-silver.htm asus w1000 silver battery,
http://www.batteryfast.com/asus/w1-silver.htm asus w1 silver battery,
http://www.batteryfast.com/asus/a42-w1-silver.htm asus a42-w1 silver battery,
http://www.batteryfast.com/asus/a32-s5-white.htm asus a32-s5 white battery,
http://www.batteryfast.com/asus/s5000-white.htm asus s5000 white battery,
http://www.batteryfast.com/asus/m5000-white.htm asus m5000 white battery,
http://www.batteryfast.com/mitac/8375-grey.htm mitac 8375 grey battery,
http://www.batteryfast.com/mitac/e2000-grey.htm mitac e2000 grey battery,

http://www.batteryfast.com/toshiba/pa3128u-grey.ht... toshiba pa3128u grey battery,
http://www.batteryfast.com/toshiba/pa3191u-grey.ht... toshiba pa3191u grey battery,
http://www.batteryfast.com/toshiba/te2000-grey.htm... toshiba te2000 grey battery,
http://www.batteryfast.com/acer/batcl32.htm acer batcl32 battery,
http://www.batteryfast.com/acer/batcl32l.htm acer batcl32l battery,
http://www.batteryfast.com/acer/btp-as2000.htm acer btp-as2000 battery,
http://www.batteryfast.com/acer/btp-73e1.htm acer btp-73e1 battery,
http://www.batteryfast.com/acer/travelmate-370.htm... acer travelmate 370 battery,
http://www.batteryfast.com/acer/travelmate-380.htm... acer travelmate 380 battery,

http://www.batteryfast.com/acer/batelw80l8h.htm acer batelw80l8h battery,
http://www.batteryfast.com/acer/batelw80l8.htm acer batelw80l8 battery,
http://www.batteryfast.com/acer/aspire-1670.htm acer aspire 1670 battery,
http://www.batteryfast.com/acer/travelmate-2200.ht... acer travelmate 2200 battery,
http://www.batteryfast.com/acer/travelmate-2700.ht... acer travelmate 2700 battery,
http://www.batteryfast.com/acer/as07a41.htm acer as07a41 battery,
http://www.batteryfast.com/acer/aspire-4310.htm acer aspire 4310 battery,
http://www.batteryfast.com/acer/aspire-4520.htm acer aspire 4520 battery,
http://www.batteryfast.com/acer/aspire-4710.htm acer aspire 4710 battery,

http://www.batteryfast.com/acer/aspire-4920.htm acer aspire 4920 battery,
http://www.batteryfast.com/acer/batbl50l6.htm acer batbl50l6 battery,
http://www.batteryfast.com/acer/aspire-5100.htm acer aspire 5100 battery,
http://www.batteryfast.com/acer/aspire-3690.htm acer aspire 3690 battery,
http://www.batteryfast.com/acer/aspire-5680.htm acer aspire 5680 battery,
http://www.batteryfast.com/acer/aspire-9120.htm acer aspire 9120 battery,
http://www.batteryfast.com/acer/batcl50l.htm acer batcl50l battery,
http://www.batteryfast.com/acer/batcl50l4.htm acer batcl50l4 battery,
http://www.batteryfast.com/acer/travelmate-290.htm... acer travelmate 290 battery,
We thought we would take a sec to explain how we integrated it into an app. Whats great about this implementation is it is totally unobtrusive and could be implemented site-wide with ease.
# Posted By karm | 9/26/08 3:05 PM
dave's Gravatar hi,Your blog is very useful,You can free add it to pr4 directory
,health,http://www.000health.com ,Construction Machinery,http://www.diging.com ,business, http://www.qxiu.com
# Posted By dave | 10/15/08 4:59 PM
Generic's Gravatar Buy Generic http://www.24onlinedrug.com
# Posted By Generic | 10/24/08 11:57 PM
alaskancruises's Gravatar alaskancruises http://alaskancruises.fateback.com alaskancruises http://discountcars.fateback.com/ discountcars
# Posted By alaskancruises | 10/25/08 12:03 AM
warhammer gold's Gravatar <A href="http://www.vipwarhammergold.com/" target=_blank><FONT =4><B>warhammer gold</B></FONT></A> <FONT =4></FONT><A href="http://www.vipwarhammergold.com/news/news.html" target=_blank><FONT size=4><B>buy warhammer gold</B></FONT></A><BR><A href="http://www.bestwarhammer.com/" target=_blank><FONT size=4><B>warhammer gold</B></FONT></A><FONT size=4></FONT> <A href="http://www.bestwarhammer.com/news/news.html" target=_blank><FONT size=4><B>buy warhammer gold</B></FONT></A><BR><A href="http://www.aocsale.com/" target=_blank><FONT size=4><B>aoc gold</B></FONT></A> <FONT size=4></FONT><A href="http://www.aocsale.com/aoc-news/" target="_blank">http://www.aocsale.com/aoc-news/" target=_blank><FONT size=4><B>age of conan gold</B></FONT></A><BR><A href="http://www.game4power.com/" target=_blank><FONT size=4><B>wow gold</B></FONT></A> <FONT size=4></FONT><A href="http://www.game4power.com/news/" target="_blank">http://www.game4power.com/news/" target=_blank><FONT size=4><B>buy wow gold</B></FONT></A><BR><A href="http://www.wowgoldone.com/" target=_blank><FONT size=4><B>wow gold</B></FONT></A> <FONT size=4></FONT><A href="http://www.wowgoldone.com/" target=_blank><FONT size=4><B>buy wow gold</B></FONT></A><BR><A href="http://www.game4power.com/" target=_blank><FONT size=4><B>world of warcraft gold</B></FONT></A> <FONT size=4></FONT><A href="http://www.wowgoldone.com/" target=_blank><FONT size=4><B>world of warcraft gold</B></FONT></A><BR><A href="http://www.gamelevelup.com/" target=_blank><FONT size=4><B>wow power leveling</B></FONT></A><BR><A href="http://itemstores.com/" target=_blank><FONT size=4><B>wow item</B></FONT></A>
# Posted By warhammer gold | 11/19/08 6:08 PM
[Add Comment]