Sort table by clicking on column header

I have an HTML table. Is it possible to make the column header in the form of a hyperlink, so that when user clicks on it, the rows get sorted in ascending/descending order based on the column values.
alice76239Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
sciphreConnect With a Mentor Commented:
The quick way is to use a javascript library to sort your table:
http://www.kryogenix.org/code/browser/sorttable/

This sorts after the table is loaded in the browser, so if your table spans multiple pages you'll need to do it the hard way or it will only sort your current page.
This also limits the sort functionality to people who run javascript capable browsers, which shouldn't be a problem.

The hard way is to add the functionality on your server side - the details are beyond the scope of my answer, as more information about your server side application code is required, but the client side will look like this:
- put your table header text in a hyperlink tag: <th> <a href="server.tld/page.php?sortcol=name&sortdir=u">Name</a></th>
- make the server side application respect these new parameters

Now your table will be presented already sorted to the client's browser, and the server-side pagination can be done after the sort, which is what you'd usually expect.
0
 
scrathcyboyCommented:
also look through www.wikipedia.org

Almost all their tables there have a tiny icon at the top of each column, and when you click on that icon, the table is resorted by column.  On any page where you find this feature, choose View -> page source (or just View -> source in IE) to see how they do it.
0
All Courses

From novice to tech pro — start learning today.