Sortable Tables in Javascript

Hi,

I am writing a web application using Perl-CgI mostly. I wanted to integrate a table in which I was capable of sorting columns and I don't think this is possible with static HTML code.

Can someone help me integrating some javascript code into what I have to acheive the above?

Regards,
garric

You can't do it with static HTML but you can do it with Perl CGI because the output is dynamic and with Perl (or if you retrieve data from database you can do the sorting at database tier also) you can do the sorting very easily. With a click the page is regenerated with the needed sorting.

This forum is an example. You can click on header to sort by a given field with a page refresh each time.

There are indeed some open-source Javascript (or AJAX) tabular sort mechanisms out there. If you search, you ought to find some out there. The obvious advantage is eliminating a page refresh so the apparent performance is better. The downside is your application will become more browser-dependent as you rely more on Javascript. And, debugging javascript written by others is a nightmare - make sure you get a good one!

Do you have any suggestions? I am not sure I can differentiate between a good one and a bad one?

Regards,
garric

I don't, because in the past, I wrote myself for customized sorting needs. But I do have experience working with some third-party Javascript that requires a lot of debugging to find out why something does not work as expected. Especially some of today's Javascript libraries or components are delivered packed and obfuscated, that makes it next to impossible to trace.

Today I just tried a third-party Javascript sort component at work out of coincidence, but I'm not naming it here because it is written for Java EE-based deployments and won't work in non-Java EE environment, so it's useless for you.

Doesn't server-side sort work for you? As I said, it is a lot more reliable and will work on any Web browser (even with Javascript off). Sure you can venture with client-side sort (or hybrid) but you must have the preparation that things may perhaps not come so smoothly (as always, your mileage may vary, so chances are you may get it working quite smoothly? :D).

might sound obvious as i know its possible in PHP but...

why not grab records from the database using a set query whereby you pass a sort (or order by) parameter to the function and in the perl manipulate the rows fetched and re-display:

Example (forgive me if my perl is awol but you will get the idea):

whereby the $sortValue is the ORDER BY column name.

@mydata=&grabDataFromDB($sortValue);

all that grabDataFromDB does is this:

sub grabDataFromDB($sortBy)
{

if ($sortBy != "")
{
$query="select * from table ORDER BY $sortBy";
}
else
{
$query="select * from table";
}

# PERL MYSQL CONNECT()
$connect = Mysql->connect($host, $database, $user, $pw);

# SELECT DB
$connect->selectdb($database);

# EXECUTE THE QUERY FUNCTION
$execute = $connect->query($query);

# HTML TABLE
$output = "<table border='1'><tr>";
$output .= "<th>id</th>";
$output .="<th>product</th>";
$output .= "</tr>";

# FETCHROW ARRAY

while (@results = $execute->fetchrow()) {
	$output .= "<tr><td>"
	.$results[0]."</td><td>"
	.$results[1]."</td><td>"
	$output .= "</tr>";
}

$output .= "</table>";
$output;
}

Hope this idea helps?

In your html you could set each header as hyperlink to the same page but also pass the name of the column to sort by...

I have had some really satisfactory experiences with YUI tools. In particular, the DataTable. There's a bit of a learning curve, but I think it's worth it.

Yes it will work. For most applications I will go with this myself also, but sometimes this is not desirable for performance reasons. Especially if the database itself has already been overloaded, having to ask the database again just to change the sorting will be an overkill. In that case you might want to rely on the server-side language (PHP/Perl) or client-side (Javascript-based) to do the sorting instead. Performance may not necessarily be better, but if the database server is on another host then at least it can be freed for serving other database queries.

This is based on observation because in production environment, database server is very often the performance bottleneck.