The best thing about JQuery however are the plugins created by the very active community. For example, there is a small script out there that lets you sort HTML tables on the client side. Normally when I dumped data out of the database on the screen I would implement sorting by simply making another database query with a modified WHERE clause and then re-draw the whole table with the new dataset. But why should I use such a database intensive method when JQuery makes it possible to quickly sort a large table without even reloading the page using client side resources?
The way I see it, this method of sorting has two major benefits over the old fashioned server side method. First, as I mentioned earlier it takes some load of the database. Second, the sorting will seem much faster to the user because we are not reloading the page. It should even be faster than an asynchronous call as these things tend to have a visible delay. Tablesorter manipulates DOM objects which are already loaded in clients memory – there is no loading or waiting required.
It even comes with a neat pager functionality which could come in handy. Then again, I’m not absolutely convinced that paging should be done on client side for very large tables but it is a nice feature to have just in case you need it.
Just to illustrate how easy it is to apply it to an existing table here is what you need to do. First download both JQuery and Tablesorter and dump them somewhere. Then simply add following calls in the header:
Then simply make your table id to be “myTable” and it’s class to be “tablesorter”. The first one is mandatory for the sorting logic to work. The “tablesorter” class is defined in the css stylesheet you link to and it will create nice headers and table layout for you:
<table id="myTable" class="tablesorter"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>a</td> <td>foo</td> </tr> <tr> <td>2</td> <td>b</td> <td>bar</td> </tr> </tbody> </table>
That’s it. You are done. Your table is completely sortable now, by every column, and is even nicely formated. It couldn’t be easier than this. :) And yes, you do have to use the thead and tbody tags.
There is one caveat though. When you download current release, be aware that the jquery.tablesorter.pack.js file is broken for some reason. It will work just fine in Firefox, and Opera but in IE6 it will throw some sort of cryptic bug. It might be some artifact introduced in the packing process or something like that. If you use jquery.tablesorter.min.js which is only marginally larger in size, this issue goes away. Go figure. It’s still a great tool despite this little glitch.
I think I’m sold on JQuery. It is tiny, and yet extremely powerful toolkit, and I highly recommend checking it out.