Sort your tables with out an extra server trip


Name I need back my money
Jack Bauer $10.00
Chuck Noris $19.00
Superman $32.12
Name Date Money
Jack Bauer 22/05/1995 12,000
Chuck Noris 22/05/2010 8,500
TOTAL 21,500

‘Table’ is one of the most important parts of any web page but it seems web community is moving away from use of tables. Still I found tables very useful when presenting any kind of data to your users. Tables are easiest way to present data.

You can use tables to present what ever you want. You can divide your entire pages layout in to tables. But I would suggest using tables to present the data and not to align your page layout. I generally use tables to display statistics, now these statistics could be anything like date wise my earning, sites visitors, the money I owe to my friends. It’s easy when you use tables. But its not like you want to only display the stats, you want the web page user to see the statistics as per their wish. Some might want to see the report sorted on earnings, landings etc.

It’s easy to do that, you just have to submit the request back to server and fetch data as per request. This technique is okay if you have couple of 100 page views per day, what about the report that is seen by millions of users. It will create millions of server request. I know the hardware is good enough to handle this. But we can avoid this high server usage and use that power to do something else.

Now the obvious question is how?

And the answer is sort tables on client side. NO server trip needed. While working on this I found very cool java scrip library that allows you to sort table on client side. No big time learning is needed. You just need to include the library to your page and assign some classes and Ids to your table and your done. When ever you click on table header it will get sorted.

Isn’t it awesome script! More importantly its ‘Open Source’. In the start of the post you must have seen the script in action, you can find such more examples at main site.

Add a Comment

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