Easy way to make HTML tables sortable!

I recently had to add the ability for a user to sort an HTML table for a client. I do realize that HTML tables are losing respect in the design world due to CSS. However, I felt that this could help a lot of people out that are still using traditional methods of viewing and organizing data.

There are 3 steps involved to make your HTML table Sortable by Ascending and Descending.

1. Download the Javascript Library
2. Include the Javascript Library by putting a link in the HEAD Section of your page.
<script src="sorttable.js"> </script>
3. Give your table the Class of “sortable”
<table class="sortable">
Note: Notice the Library’s JavaScript file is called ’sorttable’ (2 T’s) but the class you add to the table is ’sortable’ (1 T).

This is all you need for your table to now have column sorting available by clicking on the headers. It might also be a good idea to add a special style to your style sheet so users can tell that the table is indeed sortable.

January 30, 2008 | HTML, Web Development

 

Comments

One Response to “Easy way to make HTML tables sortable!”

  1. Corey on November 19th, 2008 4:06 pm

    I’m so glad I bookmarked this baby, Second time in a few years i actually had to sort old html tables. w00t w00t

Leave a Reply