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
1	powderblue	25.03
2	pink	24.95
3	lavender	14.38
4	peachpuff	29.52
5	pink	16.79
6	peachpuff	59.94
7	lavender	77.34
8	lightgreen	42.35
9	lightgreen	40.32
10	lightgreen	23.26
11	lightgreen	14.55
12	peachpuff	92.09
13	peachpuff	7.88
14	pink	76.62
15	lavender	4.28
16	lavender	91.99
17	lightgoldenrodyellow	32.74
18	lightgreen	57.91
19	lightgoldenrodyellow	7.62
20	powderblue	57.28

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 src="shellsort.js"></script>

You will need to copy the JavaScript file to your server to avoid our hot-link protection.

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>

  var dataTable = document.querySelector("#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 the above 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.

To sort by a value that is not visible in the table, you can add data-sort="..." attributes to the elements in that column containing the values to use in sorting.

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

include the relevant external JavaScript file; and
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 DHTML Insertion Sort
JavaScript DHTML Shell Sort
JavaScript Sorting Algorithm Comparison
JavaScript DHTML Sorting Using OOP - Example 1
JavaScript DHTML Sorting Algorithms
JavaScript DHTML Quick Sort
JavaScript DHTML Bubble Sort
PHP Sorting Arrays of Arrays
PHP Sorting SimpleXMLElement Object arrays

< JavaScript

User Comments

Post your comment or question

yeojin song 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.

JavaScript: DHTML Sorting Using OOP - Example 1

Demonstration

Instructions for implementation

Related Articles - Sorting Algorithms

User Comments