Here is code which is an extension of Client-side Table Sorting using JavaScript. This extension add few features to the table sorting code in javaScript.
This code does not need to add event handler in HTML code. Using JavaScript itself, hander is getting added. Based on string in column, sorting function can be chosen for each individual function at config time. In case of number in column, you can tell in config about ascending or descending sorting in first click on column.
Currently functions for sorting number and string are given here. It can easily be extended.
Demo of Table Sorting in JavaScript here.
HTML code using in Sorting Table:
<table id="results"><thead><tr><th><a href="#" class="italics">Position Jun 07</a></th><th>Position Jun 06</th><th>Porg. Language</th></tr></thead><tbody><tr> <td>1</td> <td >1</td> <td>Java</td></tr> <tr> <td>2</td> <td>2</td> <td>C</td> </tr> <tr> <td >3</td> <td >3</td> <td>C++ </td> </tr> <tr> <td>4</td> <td>4</td> <td>VB</td> </tr> <tr> <td>5</td> <td>5</td> <td>PHP</td> </tr><br /></tbody></table>
Little bit of CSS:
<style>
#results td, #results th {border:1px solid gray; padding:3px;}
</style>
Main part: JavaScript for sorting Table
<script type="text/javascript">
var tableSort = {};
tableSort.id = 'results';
tableSort.cols = [];
// cols to consider for sorting and type of sorting:num|string
tableSort.cols[0] = [0, 'num', 'desc']; // 1st col
tableSort.cols[1] = [2, 'val']; // 3rd col
var d = document;
// Config
var table1 = d.getElementById(tableSort.id);
var thead1 = table1.getElementsByTagName('thead')[0];
var THs = thead1.getElementsByTagName('th');
// Mention already sorted cols (from server side) here or anything out of range cols number ( -1)
var sortedOn = -1;
// Add sorting event to cols
for(var i=0, len=THs.length; i < len; i++) {
for (var j=0; j < tableSort.cols.length; j++) {
if (i == tableSort.cols[j][0]) {
THs[i].onclick = (function (sortOn) {
return function() {
enableSort(sortOn);
}
})(i);
var links = THs[i].getElementsByTagName('a')[0];
if (links) {
links.setAttribute('class', 'sort');
}
else {
THs[i].innerHTML = '<a href="javascript:;" class="sort">' + THs[i].innerHTML + '</a>';
}
}
}
}
function enableSort(sortOn) {
var tbody = table1.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr');
var rowArr = [];
for (var i =0; i < rows.length; i++) {
rowArr[i] = {};
rowArr[i].oldIndex = i;
rowArr[i].value = rows[i].getElementsByTagName('td')[sortOn].innerHTML;
}
if (sortOn == sortedOn) {
rowArr.reverse();
}
else {
sortedOn = sortOn;
for(var i=0; i< tableSort.cols.length;i++) {
if (tableSort.cols[i][0] == sortOn) { // Call to sort On a col
if (tableSort.cols[i][1] == 'num' ) {
if (tableSort.cols[i][2] = 'desc')
rowArr.sort(RowCompareNumbersDesc);
else
rowArr.sort(RowCompareNumbers);
}
else {
rowArr.sort(RowCompare);
}
}
}
}
var newTbody = d.createElement('tbody');
for (var i=0, length=rowArr.length ; i<length; i++) {
newTbody.appendChild(rows[rowArr[i].oldIndex].cloneNode(true));
}
tbody.innerHTML = newTbody.innerHTML;
} // Func End
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);
}
function RowCompareNumbersDesc(a, b) {
var aVal = parseInt(a.value);
var bVal = parseInt(b.value);
return (bVal - aVal);
}
// compare currency
function RowCompareDollars(a, b) {
var aVal = parseFloat(a.value.substr(1));
var bVal = parseFloat(b.value.substr(1));
return (aVal - bVal);
}
</script>
Please share if you find table sorting in Javascript code useful.