WebDesires

Sort Table By Column using JavaScript – Text Sort & Number Sort

Sort Table By Column using JavaScript – Text Sort & Number Sort

Need Some Help? We are here for you!

We have a very friendly service - Come and chat to us and let us know what you need, we work for an hourly fee and can also provide you a no obligation quote and begin work immediately in most cases. Click "Request Support" or use our Live Chat.

Request Support
There is a mobile optimized version of this page, view AMP Version.

So recently I wanted to be able to sort a HTML table column using Javascript, I wanted to be able to sort ASC or DESC flipping the order on multiple clicks of the column. The table was going to be pretty big so another important factor was speed, it had to run as fast as possible. This last detail was more of a gotcha because I wrote a script to do the sorting but it was VERY SLOW on large tables so I had to go back to the drawing board and refine my code until the table size was no longer a huge performance hit.

What I’ve come up with below is extremely fast, it will still obviously slow down more and more the bigger and more complex your tables are, but this is working fine with a table with 10 columns and over 2000 rows with only a second of runtime between click and result. Much better than 5-10 minutes with the code I first wrote.

So what this code is doing in a nutshell:

  1. Fetches all the rows of the table and stores the row HTML and the value from the column in a multi-dimensional array.
  2. Sorts the JavaScript array based on the value in the multi-dimensional array (it will detect if the values are strings or numbers and sorts accordingly), without touching the Dom at all (this is where the speed was improved).
  3. overwrites each cell in the table with the new data (before I was clearing the table and adding the new data in but this apparently causes some issues in IE).
  4. Appends a caret to the column header so you know you have sorted that column and in which direction (ASC or DESC).

Here is an example code below, all you need to do is match the ID on the table tag with the ID mentioned in the JS, add sortTable to each column TD you want sortable (make sure you use correct column depth starting at 0) and make sure you code your tables properly, ie. with a thead and tbody.

 

Javascript

var asc = 0;
function sort_table(table, col)
{
	$('.sortorder').remove();
	if (asc == 2) {asc = -1;} else {asc = 2;}
	var rows = table.tBodies[0].rows;
	var rlen = rows.length-1;
	var arr = new Array();
	var i, j, cells, clen;
	// fill the array with values from the table
	for(i = 0; i < rlen; i++)
	{
		cells = rows[i].cells;
		clen = cells.length;
		arr[i] = new Array();
		for(j = 0; j < clen; j++) { arr[i][j] = cells[j].innerHTML; }
	}
	// sort the array by the specified column number (col) and order (asc)
	arr.sort(function(a, b)
	{
		var retval=0;
		var col1 = a[col].toLowerCase().replace(',', '').replace('$', '').replace(' usd', '')
		var col2 = b[col].toLowerCase().replace(',', '').replace('$', '').replace(' usd', '')
		var fA=parseFloat(col1);
		var fB=parseFloat(col2);
		if(col1 != col2)
		{
			if((fA==col1) && (fB==col2) ){ retval=( fA > fB ) ? asc : -1*asc; } //numerical
			else { retval=(col1 > col2) ? asc : -1*asc;}
		}
		return retval;      
	});
	for(var rowidx=0;rowidx<rlen;rowidx++)
	{
		for(var colidx=0;colidx<arr[rowidx].length;colidx++){ table.tBodies[0].rows[rowidx].cells[colidx].innerHTML=arr[rowidx][colidx]; }
	}
	
	hdr = table.rows[0].cells[col];
	if (asc == -1) {
		$(hdr).html($(hdr).html() + '<span class="sortorder">▲</span>');
		} else {
		$(hdr).html($(hdr).html() + '<span class="sortorder">▼</span>');
	}
}


function sortTable(n) {
	sort_table(document.getElementById("myTable"), n);
}

 

HTML Example

<table>
	<thead>
		<tr style="cursor:pointer">
			<td onclick="sortTable(0);">head 1</td>
			<td onclick="sortTable(1);">head 2</td>
			<td onclick="sortTable(2);">head 3</td>
			<td onclick="sortTable(3);">head 4</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>a</td>
			<td>3</td>
			<td>b</td>
			<td>2</td>
		</tr>
		<tr>
			<td>c</td>
			<td>1</td>
			<td>c</td>
			<td>3</td>
		</tr>
		<tr>
			<td>b</td>
			<td>2</td>
			<td>a</td>
			<td>1</td>
		</tr>
	</tbody>
</table>

Need Some Help? We are here for you!

We have a very friendly service - Come and chat to us and let us know what you need, we work for an hourly fee and can also provide you a no obligation quote and begin work immediately in most cases. Click "Request Support" or use our Live Chat.

Request Support

Author: Dean Williams

Professional PHP Web Developer with expertise in OpenCart Web Development, WordPress Web Development, Bespoke Systems - also a seasoned Linux Server Administrator.