Client Side Table Sorting with JQuery

For a while now, I have been searching for a good Javascript framework to mess around with. I think I finally found one that I really like. JQuery is a 15 Kb bundle of pure fucking magic. It is tiny compared to some of the other frameworks out there, and at the same time very powerful. What can it do? Tons of stuff. First thing you notice is of course eye candy things like sliding and hiding divs, easily manipulating tons of data on the page and etc.

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?

Go check out the demo on the tablesorter plugin website. It is really a great piece of work. Christian Bach deserves major props for putting this together. To tell you the truth, I never really considered sorting of tables in javascript mainly because the amount of effort it would take on my part. Implementing the sorting algorithm and the transformations would just be so much more time consuming than simply writing a quick SQL query. It somehow never seemed worth the effort to me, until now.

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:

<script type="text/javascript" src="/path/to/jquery.js"></script> 
<script type="text/javascript" src="/path/to/tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript">	$(document).ready(function() { $("#myTable").tablesorter(); } );</script>
<link rel="stylesheet" href="/path/to/tablesorter/themes/blue/style.css" type="text/css" media="screen, print" >

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.

[tags]jquery, tablesorter, javascript, table sorting, sorting[/tags]

This entry was posted in programming and tagged , . Bookmark the permalink.



6 Responses to Client Side Table Sorting with JQuery

  1. Thanks for the Kudos! I will see to it that the issue with the packed version and IE6 is resolved or removed as soon as i get some free time on my hands.

    Reply  |  Quote
  2. Luke Maciak UNITED STATES Mozilla Firefox Ubuntu Linux Terminalist says:

    Awesome! It’s a great plugin and I’m totally using it all over the place now. :) Thanks!

    Sorry for not being very descriptive with the packed bug, but since IE js errors are cryptic I didn’t really delve much into it. When I swapped it with the min version the error got away. It might be as simple are re-packing it. :)

    Also, I have no clue how people coded Javascript before Firefox and Firebug. Even trying to find the error using IE gave me a major headache. :P

    Reply  |  Quote
  3. Prawin INDIA Mozilla Firefox Windows says:

    Hi,
    Iam Prawin. Iam new to Jqeury. Thanks for the article.

    Reply  |  Quote
  4. wshato UNITED STATES Google Chrome Windows says:

    Thanks for the post. I started using tablesorter for a work project today and had some trouble getting the styling to work correctly. This solved my issue.

    Reply  |  Quote
  5. Thanks for the article. I love this plugin and using it in several projects. Thanks for sharing. :)

    Reply  |  Quote
  6. wow. my search ends here. will love to use this in my next projects. table sorter looks so easy! :) thanks for sharing.

    Reply  |  Quote

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>