Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Sort table by clicking on column header

Posted on 2008-10-01
3
Medium Priority
?
530 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:alice76239
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 5

Accepted Solution

by:
sciphre earned 1200 total points
ID: 22612616
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22618103
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question