You Are Here:

Community: Blogs

Hartti Suomela's Forum Nokia Blog

Table sorting with JavaScript

hartti | 26 September, 2008 04:16

It has been again a few months since my last post. A few months? Really??? (Time flies, I have to agree...)

Anyhow, it has been even longer, way longer, since I did anything on the Web development side. My old pet project (national team statistics for Ultimate Frisbee... maybe more about that in a later post) has been suffering with crappy coding (naturally by yours truly) for years, and especially there has been no data updates for about 2 years (even though there has been quite a few games played within that period).

Last week I finally got some statistics updated online, and this week I started tinkering with my old code (undocumented of course... painful...). My first task was to find a way to sort HTML tables with JavaScript, so the users do not always need to wait for sorted data retireval from the server. The first script I bumped into was sorttable by Stuart Langridge. With this nifty script it was extremly easy to change the tables to use JavaScript based sorting: I just included the JavaScript code on the pages and added class="sortable" attribute in my HTML tables. (Ok. Ok. I also removed the old sorting links from the table header row and added some style definitions in the site's css-file, but that's it). Lo and behold, the table sorting worked. Very powerful and easy!

Unfortunately for me, the script lacked one important feature. It turned out to be impossible to create a header column for the data rows, which would not be sorted (row headers / row numbering). And off I went for some more googling.

After a few disappointments, I finally found a useful JavaScript library which solved my problem: Google Visualization API. Man, that API is powerful. It provided a very good solution for me for my table sorting problem (although it means a little more work for me, as I am forced to some more coding to change my direct HTML table code to use the JavaScript-based tables that the API uses), but it also contains very cool visualization tools (check for example Motion Chart and Annotated Time Line in the Gallery). Sure, I have not yet checked the licencing rights, which are likely a little stricter that what sorttable has, but I do not think this will cause any problems for my hobby project. And no, I have not yet taken this into use - that's the task for tomorrow I guess :-)

RSSComments

You must login to post comments. Login
 

Rate This

 
 
Bookmark this page: DeliciousDiggFacebookGoogleYahooStumbleUponRedditDiigoTechnocratiTwitter  Share this page Share this page Print this Page Print this page Invite a friend Invite a friend
京ICP备05048969号    Email Newsletters Press Terms & Conditions Privacy Policy Sitemap Contact Us © 2009 Nokia 
RDF Facets: qdcZdescriptionQSxharttiE20E7cE2027E20MarchE2cE202008E2016E3a26E20GeneralE20E7cE20NeE78tE20E7cE20PreviousE20E7cE20TrackbacksE20E280E29E20Ea0E20E52E44FE20FacetsE3aE20E71fnE5atopicE51UE71fnBlogTopicE5ageneralE51E20E71fnE5atopicE51UE71fnTopicE5abrowsingE51E20E71fnE5atypeE51UE71fnTypeE5aBlogContentE51E20E71fnE5atypeE51UE71fnTypeE5aBlogE4545ntryE51E20E71fnE5atypeE51UE71fnTypeE5aCommunityContentE51E20E71fnE5atypeE51UE71fnTypeE5aWebpageE51E20E71marsE5alanguageE51UE78httpE453aE452fE452fswE452enokiaE452ecomE452flanguageE452d1E452fenE58X qdcZidentifierQSxhttpE3aE2fE2fblogsE2eforumE2enokiaE2ecomE2fblogE2fcommunityE2dvideosE2f2008E2f03E2f27E2fboomE2dgameE2dwidsetsE2dwidgetX qdcZpublisherQUxhttpE3aE2fE2fswE2enokiaE2ecomE2fidE2fc764fd1cE2d8b06E2d499aE2d9a6aE2d17c3903d5a65E2fforumE5fnokiaE5fcrawlerE5fagentX qdcZtitleQSxCommunityE20VideosE20E7cE20BOOME20gameE20E2dE20WidSetsE20widgetX qdcZtypeQUqfnZE45E78cludedFromGeneralE4cistingsQ qdcZtypeQUqfntypeZBlogContentQ qdcZtypeQUqfntypeZBlogE45ntryQ qdcZtypeQUqfntypeZCommunityContentQ qdcZtypeQUqfntypeZE52esourceQ qdcZtypeQUqfntypeZWebpageQ qdcZtypeQUqmarsZManagedE52esourceQ qdcZtypeQUqwebZInformationE52esourceQ qdcZtypeQUqwebZPageQ qdcZtypeQUqwebZE52esourceQ qdcZtypeQUqrdfsZE52esourceQ qrssZdescriptionQSxharttiE20E7cE2027E20MarchE2cE202008E2016E3a26E20GeneralE20E7cE20NeE78tE20E7cE20PreviousE20E7cE20TrackbacksE20E280E29E20Ea0E20E52E44FE20FacetsE3aE20E71fnE5atopicE51UE71fnBlogTopicE5ageneralE51E20E71fnE5atopicE51UE71fnTopicE5abrowsingE51E20E71fnE5atypeE51UE71fnTypeE5aBlogContentE51E20E71fnE5atypeE51UE71fnTypeE5aBlogE4545ntryE51E20E71fnE5atypeE51UE71fnTypeE5aCommunityContentE51E20E71fnE5atypeE51UE71fnTypeE5aWebpageE51E20E71marsE5alanguageE51UE78httpE453aE452fE452fswE452enokiaE452ecomE452flanguageE452d1E452fenE58X qfnZdistributionQUxhttpE3aE2fE2fblogsE2eforumE2enokiaE2ecomE2fX qfnZtopicQUxhttpE3aE2fE2fswE2enokiaE2ecomE2fFNE2d1E2fBlogTopicE2fgeneralXRqdcZtypeQUqrdfsZE52esourceQRqmarsZrelevanceQNx100X qfnZtopicQUqfnTopicZbrowsingQRqdcZtypeQUqrdfsZE52esourceQRqmarsZrelevanceQNx100X qfnZtopicQUqfnTopicZwebE5ftechnologyQRqmarsZrelevanceQNx100X qfnZtypeQUqfntypeZBlogContentQ qfnZtypeQUqfntypeZBlogE45ntryQ qfnZtypeQUqfntypeZCommunityContentQ qfnZtypeQUqfntypeZE52esourceQ qfnZtypeQUqfntypeZWebpageQ qfnZupdatedQDx2008E2d03E2d27X qfnZuserE5ftagQSxbrowsingX qfnZuserE5ftagQSxwebE2dtechnologyX qmarsZdescriptionQSxharttiE20E7cE2027E20MarchE2cE202008E2016E3a26E20GeneralE20E7cE20NeE78tE20E7cE20PreviousE20E7cE20TrackbacksE20E280E29E20Ea0E20E52E44FE20FacetsE3aE20E71fnE5atopicE51UE71fnBlogTopicE5ageneralE51E20E71fnE5atopicE51UE71fnTopicE5abrowsingE51E20E71fnE5atypeE51UE71fnTypeE5aBlogContentE51E20E71fnE5atypeE51UE71fnTypeE5aBlogE4545ntryE51E20E71fnE5atypeE51UE71fnTypeE5aCommunityContentE51E20E71fnE5atypeE51UE71fnTypeE5aWebpageE51E20E71marsE5alanguageE51UE78httpE453aE452fE452fswE452enokiaE452ecomE452flanguageE452d1E452fenE58X qmarsZlanguageQUxhttpE3aE2fE2fswE2enokiaE2ecomE2flanguageE2d1E2fenX qrdfZtypeQUqfnZE45E78cludedFromGeneralE4cistingsQ qrdfZtypeQUqfntypeZBlogContentQ qrdfZtypeQUqfntypeZBlogE45ntryQ qrdfZtypeQUqfntypeZCommunityContentQ qrdfZtypeQUqfntypeZE52esourceQ qrdfZtypeQUqfntypeZWebpageQ qrdfZtypeQUqmarsZManagedE52esourceQ qrdfZtypeQUqwebZInformationE52esourceQ qrdfZtypeQUqwebZPageQ qrdfZtypeQUqwebZE52esourceQ qrdfZtypeQUqrdfsZE52esourceQ