General
Databases (73)
Linux (41)
Outside the Cube (5088)
Programming (679)
Web publishing (65)
about DelphiFAQ (14)
JavaScript (31)
perl CGI (3)
VBScript (1)
Web Hosting (8)
Windows (431)

Make an HTML table sortable

2 comments. Current rating: 4 stars

(1 votes). Leave comments and/ or rate it.

Question:

I need to display data in a sortable HTML table. How can I do that?

Answer:

HTML itself does not offer sorting in the TABLE structure. You need to use javascript for this.

I found a free javascript that can be plugged into your site with a minimum of change of your HTML document.

Simply include the sortTable.js file into your document - ideally within the HEAD section.

Give your table a unique name and also specify the ID property with the same name.

Call the initialization initTable() with the ID of your table.
If you have multiple tables, you need to call initTable() several times.

Make sure to have no row spans.
Make sure to have no col spans in the header (you may have it in the data rows though!).

You can download the javascript code file here: sortTable.js

Here the sorted table in action - click on the table header row to sort by any column:

First name	Last name	Age
Bill	Jones	45
Ann	Moss	35
Jane	Michels	40


	<script src="/software/sortTable.js"> <Table id=usertable border=1 cellspacing=2 cellpadding=2> //.. </Table> <script language="javascript"> initTable("usertable"); </script>

Send a message to
Subject

Comments:

2009-10-02, 12:28:27

anonymous

This script works well if the table has different background colors to help show different rows. The only downside to keeping the background coloring is that it means hyperlinks and text colors also do not move with the text when resorted. This breaks links in a table and can incorrectly color text.

NEW: Optional: Register Login Email address (not necessary): Rate as	Hide my email when showing my comment. Please notify me once a day about new comments on this topic. Please provide a valid email address if you select this option, or post under a registered account.

	Show city and country Show country only Hide my location
You can mark text as 'quoted' by putting [quote] .. [/quote] around it.
Please type in the code:
Please do not post inappropriate pictures. Inappropriate pictures include pictures of minors and nudity. The owner of this web site reserves the right to delete such material. Add a picture:


	Search: