Client-side Table Sorting Using Javascript

Jun 30th, 2007

What about the idea of giving the user power of sorting the table's column using JavaScript. User can sort any column of the table.
I saw this facility from a software I was using. It was running very fast and smoothly. That web app was using JavaScript from another site. So I though it will be a good idea checking this JavaScript code. I checked and posted it here.
I have mentioned a link to the original source also.

JavaScript Table- Sorting Working Example:

Position Jun 07 Position Jun 06 Porg. Language
1 1 Java
2 2 C
3 3 C++
4 4 VB
5 5 PHP

More Ranks

Javascript Table Sorting Code:

<script type="text/javascript">
var sortedOn = 0;

function SortTable(sortOn) {

var table = document.getElementById('results');
var tbody = table.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr');

var rowArray = new Array();
for (var i=0, length=rows.length; i<length; i++) {
rowArray[i] = new Object;
rowArray[i].oldIndex = i;
rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;
}

if (sortOn == sortedOn) { rowArray.reverse(); }
else {
sortedOn = sortOn;
/*
Decide which function to use from the three:RowCompareNumbers,
RowCompareDollars or RowCompare (default).
For first column, I needed numeric comparison.
*/
if (sortedOn == 0) {
rowArray.sort(RowCompareNumbers);
}
else {
rowArray.sort(RowCompare);
}
}

var newTbody = document.createElement('tbody');
for (var i=0, length=rowArray.length ; i<length; i++) {
newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));
}

table.replaceChild(newTbody, tbody);
}

function RowCompare(a, b) { 

var aVal = a.value;
var bVal = b.value;
return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));
}
// Compare number
function RowCompareNumbers(a, b) {

var aVal = parseInt( a.value);
var bVal = parseInt(b.value);
return (aVal - bVal);
}
// compare currency
function RowCompareDollars(a, b) {

var aVal = parseFloat(a.value.substr(1));
var bVal = parseFloat(b.value.substr(1));
return (aVal - bVal);
}
</script>

HTML Code:
Here is the html code I have used in table sorting example.

This script does not use server-side script, so no page refresh for sorting data in ascending or descending order. It also maintain row data while sorting column.

You may have find this table sorting script very cool! Digg it?
Reference: Table Sorting by Porter Glendinning

 

 

Possibly Related posts:

  1. Ganesh Chiluveru
    July 14th, 2008 at 15:17 | #1

    it is very nice and simple to use. thank you very much.

    bye
    ganesh ch

  2. praful
    October 24th, 2008 at 03:23 | #2

    It is very simple.Thank you very much

  3. Hendry Agung
    August 2nd, 2009 at 20:44 | #3

    i'm new to blog,i want to use this script, how to put this script in bloger post ?

Comments are closed.