Table Sorting in JavaScript

Jun 20th, 2012

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>