skip to content

JavaScript: DHTML Sorting Using OOP - Example 1

 Tweet Share0 Tweets

JavaScript: DHTML Sorting Using OOP - Example 1

This is a stand-alone version of Example 1 from DHTML Sorting Using OOP.

Demonstration

Click on a column header to sort by that column, or use the form below.

id colour random
1red51.37
2yellow38.2
3purple83.66
4green63.38
5blue76.64
6orange49.65
7red54.22
8red87.1
9purple66.74
10red15.16
11yellow50.71
12green42.8
13green30.4
14green18.14
15yellow44.54
16purple10.5
17red69.5
18orange54.75
19yellow97.55
20red43.2

Sort by DESC?

Instructions for implementation

Before proceeding you should view the source code for this page as everything you need is visible there - and clearly marked. The code has been stripped down to make it as understandable as possible.

The first step is to include the external JavaScript file. In this case we've decided to use the 'shell sort' version:

<script type="text/javascript" src="shellsort.js"></script>

Note: You will need to copy the JavaScript file to your server before it can be included.

Then we need to properly mark up and reference the data to be sorted. This means using a TABLE structure similar to the following:

<table> <thead> <!-- rows to be preserved --> </thead> <tbody id="data"> <!-- rows to be sorted --> </tbody> </table>

We're going to use the THEAD section to hold the column headers which are also links that trigger sorting, and the TBODY section for the data to be sorted. The id value must be unique on the page and is the 'handle' used by JavaScript to reference that node (see below).

Now we add the following JavaScript code after the table to initialise the sort:

<script type="text/javascript"> var dataTable = document.getElementById('data'); var sortTable = new shellSort(dataTable, "TR", "TD"); </script>

The dataTable variable points to the TBODY node that contains the rows of data to be sorted. The sortTable variable is an instance of the shellSort object as defined in the external JavaScript file.

Now that we've (hopefully) successfully initialised the shellSort object, we can use it's single public function:

sortTable.sort(0); // sort by 1st column (ascending) sortTable.sort(1, true); // sort by 2nd column (descending) sortTable.sort(2, false, 'a'); // sort on contents of first 'a' node in 3rd column (ascending)

In this example, the links at the top of each column will sort by that column, using the direction indicated by the checkbox in the form below the table.

The form provides a similar functionality. When a value is chosen in the select box or the checkbox is clicked, the table is sorted by the selected column, in the direction indicated by the checkbox.

As mentioned previous, to use a different sort algorithm you need to:

  1. include the relevant external JavaScript file; and
  2. instantiate the corresponding class ('shellSort' in this example).

Questions or comments or want to tell us how you're using the code? Use the feedback link below.

< JavaScript

Send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

<- copy the digits from the image into this box

press <Esc> or click outside this box to close

User Comments

Post your comment or question

21 October, 2015

Hi, I'm writing email to say thanks.
your post helped me a lot to understanding of sorting in JavaScript.
I've searched many web sites In my opinion, your web site is the most easiest to understanding however English is not my mother language.

top