Solved

Sort table by clicking on column header

Posted on 2008-10-01
3
527 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 300 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
send html form with multipe immages as buttons 2 37
Slow Down an Animation 3 29
Sticking text to shapes in Raphael.js 6 41
Dropdown animation to normal dropdown 6 28
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

739 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