Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Sort table by clicking on column header

Posted on 2008-10-01
3
Medium Priority
?
531 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
2 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

783 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