Solved

Sort table by clicking on column header

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Head to not include on scroll 4 23
Asp in server side with Mssql Server 7 4 27
HowTo set a global variable in javascript or jQuery 4 21
Autocomplete with Jquery Question 2 19
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.
This article discusses four methods for overlaying images in a container on a web page
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

809 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