One of the most common uses of the Internet is to display
information in a tabular format; examples of this include:

  • Lists
    of events in date order.
  • Contents
    of an article.
  • Price
    lists.

In many of these situations, the users may want to sort the information
presented to them in a different order than that initially provided by the Web site,
for example, in alphabetical rather than date added order or first name rather than
last name.

In this article, we will examine a few methods developers can
use to provide this kind of functionality to the end user.

Sorting

In
its simplest form, a separate page could be created and maintained for each
type of sort that the user may want to do, for example if you are providing a
list of people as follows:

First Name

Last Name

John

Doe

Micky

Mouse

Minnie

Mouse

James

Bond

George

Bush

Then you could expect that your users would require the following
sort orders on this data:

  • First
    Name ascending alphabetically.
  • First
    Name descending alphabetically.
  • Last
    Name ascending alphabetically.
  • Last
    Name descending alphabetically.

With such a small amount of data or content that is static
for long periods of time, it is quite possible to create a separate page for
each sort order, as can be seen in Demo1a in the accompanying demonstration download.

However, for larger, more complex or dynamic sets of
information, this approach quickly becomes extremely resource intensive and
difficult to maintain, so alternatives need to be found. In this article, we
are going to break the alternative options down into three distinct sets:

  • Client side – Those that are
    primarily reliant on client side functionality such as JavaScript, DHTML,
    Browser’s DOM, etc.
  • Server side – Those that are
    primarily reliant on server side functionality such as ASP, ASP.Net,
    Databases, etc.
  • Joint effort – Those that are
    reliant on a combination of client and sever side functionality such as an
    ASP-generated XML file being sorted on the client side by JavaScript

Demonstration notes

The demonstration files located in this download
should be extracted to the same directory. Some of the files require an ASP
interpreter, Active X controls, or other server side Web software.

Client side

Let’s take a look at Client side options first; these
examples are reliant on the browser having client side JavaScript enabled,
which is the majority of browsers (see W3Schools Browser
Survey). Some of these examples may also make use of functionality
supported by specific browsers, such as Internet Explorer or Firefox.

JavaScript has an in-built SORT method, which can sort a set
of data and—if we represent our data as an array—then, we can quickly sort the
data using a function similar to the one shown in Demo2.
For ease of use we will create an array of Objects, where each object has two
properties—first name and last name—as can be seen in Listing A.

The array personArray
is an array of objects, and begins unsorted. After the buildIndex function is run, the array is sorted in order of Last
Name alphabetically. This can be seen in Demo 2, in the accompanying download.

The sorting itself is very quick, but what are we to do once
we have sorted the data? We need to display it to the user, and there are two
simple ways to do this:

The first is to set a value in the Query String of the
browser and then refresh the page, having the JavaScript function look at the
Query String on load, and then sort the data accordingly. Then, at the relevant
point in the code, simply print them out—as shown in Demo 3.
The second option is to create an HTML element that can be populated via DHTML
and JavaScript with the correctly sorted data—as shown in Demo 4.

The first example requires a post back to the server to get
the current page again and then sorts it on load; the second example does this
without the request to the server, and so is the better approach. This is the
approach used on several sites including the Livelink Customisation Index
page.

Another possible option is to publish the data into another
tool—such as Microsoft Excel—in which the users may feel more familiar and in
which the functionality to manipulate and sort data is significantly better.
See the article, “Explore ways to pass a Microsoft Excel file to the client side,”
for a description of this approach or take a look at Demo 5
(which is IE-only and requires you to allow ActiveX controls to run).

Server side

Next we will examine a series of approaches that are
primarily server side. For these examples, we shall use Classic ASP written in
VBScript, although they could be quickly and easily converted into other
languages. The most obvious approach here is to have the data stored in a
database and then have the ASP page connect to the database, query it using an
ORDER BY clause to get the order correct, and then simply display the output in
an HTML table to the user. (See Demo 6)
A Java Server Page (JSP) or PHP implementation of this code would be almost
identical and perform with similar speed.

In addition to these “Interpreted” pages, we could
use a compiled page. At the simplest level, this could be a VB DLL for use with
a Classic ASP page or a Java Servlet for use with a JSP page. The following
definitions of Interpreted
and Compiled code explain
the differences between them. Another option that is becoming increasingly
common with developers is to use Microsoft’s .NET Framework, one of the
building blocks of which is the DataGrid control which can be seen in Demo 7.

Client and server side

In some cases, the client and server side can unite to
deliver the functionality to the user; there are several methods of doing this,
and we shall explore a few of them.

The simplest case is to have the server side return a page
containing the data and the client-side JavaScript shown in the first set of
examples to sort and display the page. While to many, this may seem like a
waste—as the sorting could, or should, be done on the server side—there are
cases where it may be the most appropriate solution.

For example, in cases where the data volume is not
significantly large and the connectivity between the client and the server is
poor, or slow, then generating the initial data set on the server side and
delivering it with the sorting code to the client side—where the sorting, if
required, can occur—could be the most suitable solution, given the situation.
An example of this can be found in
Listing B.

Another similar option would be to replace the server side
ASP with an XML file, which itself may or may not be generated from an ASP file,
and then have the client-side sorting code interact with this in a similar way.
In this method, only a single request, and not the entire page, is sent to the
server side. An example of this could be the loading of an XML file containing
moves for a Chess game that is then parsed and processed on the client side as
shown in this example.

Some slight variations on the theme could incorporate the
use of a new browser window to interact with the server side to get the data
and then have it processed by the client side, such as the one shown in Demo 8.
A similar approach can be taken using an IFrame, which could be hidden from the
end user if required, as can be seen in Demo 9.

Performance

The options described above, allow us to sort the data and
display it to the user, but which is the best tool for the job given a certain
amount of data? The expectation is that for small sets of data, client-side
processing would be significantly quicker than server-side processing, with the
gap decreasing as the size of data rises and eventually, the server side
approach becomes the more efficient.

To try and prove this statement, I took a data set
containing a given number of records and then used the methods described above
to sort them, recording the overall time—in seconds—from start to finish for
each approach. The results are shown in
Table A.

As you can see from the results, the time required for the
client-side focused tests are steadily increasing, especially those which need
a round trip to the server; for the others, the time remains relatively
constant for such a small number of records. The ActiveX tests show a very good
result, but it is using Excel’s sorting functionality, which is designed to do
this kind of sorting work. The .NET code also seems to perform well, which
appears to be due to the fact that it is a compiled script, as opposed to Classic
ASP’s interpreted approach.

Sorting datasets

This article has offered several different methods for
providing sortable datasets to the end user, some of which I hope will be new
to the reader. As you can see, the results of the performance test clearly illustrate
the range of records at which each approaches best performance. Bear in mind
that these results may vary if you data which is more complex—e.g., has
multiple people with the same or similar Last Name or has more columns which
need to be manipulated.