JavaScript Sorting Problem

Question

0.00/5 (No votes)

See more:

I am trying to get help with JavaScript sorting dates in a table. The table also uses html and Css. It seems the dates are sorted European style yyyy/dd/MM and I want it to sort/display MM/dd/yyyy. Below is the js and I will also post html if needed. thank you very much for your help.

JavaScript

/*
Table sorting script  by Joost de Valk, check it out at http://www.joostdevalk.nl/code/sortable-table/.
Based on a script from http://www.kryogenix.org/code/browser/sorttable/.
Distributed under the MIT license: http://www.kryogenix.org/code/browser/licence.html .
Copyright (c) 1997-2007 Stuart Langridge, Joost de Valk.
Version 1.5.7
*/
/* You can change these values */
var image_path = "http://www.igwtamerica.org/";
var image_up = "arrow-up.gif";
var image_down = "arrow-down.gif";
var image_none = "arrow-none.gif";
var europeandate = false;
var alternate_row_colors = true;
/* Don't change anything below this unless you know what you're doing */
addEvent(window, "load", sortables_init);
var SORT_COLUMN_INDEX;
var thead = false;
function sortables_init() {
	// Find all tables with class sortable and make them sortable
	if (!document.getElementsByTagName) return;
	tbls = document.getElementsByTagName("table");
	for (ti=0;ti&lt;tbls.length;ti++) {
		thisTbl = tbls[ti];
		if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) &amp;&amp; (thisTbl.id)) {
			ts_makeSortable(thisTbl);
		}
	}
}
function ts_makeSortable(t) {
	if (t.rows &amp;&amp; t.rows.length &gt; 0) {
		if (t.tHead &amp;&amp; t.tHead.rows.length &gt; 0) {
			var firstRow = t.tHead.rows[t.tHead.rows.length-1];
			thead = true;
		} else {
			var firstRow = t.rows[0];
		}
	}
	if (!firstRow) return;
	
	// We have a first row: assume it's the header, and make its contents clickable links
	for (var i=0;i&lt;firstRow.cells.length;i++) {
		var cell = firstRow.cells[i];
		var txt = ts_getInnerText(cell);
		if (cell.className != "unsortable" &amp;&amp; cell.className.indexOf("unsortable") == -1) {
			cell.innerHTML = '&lt;a href="#" class="sortheader" onclick="ts_resortTable(this, '+i+');return false;"&gt;'+txt+'&lt;span class="sortarrow"&gt;&lt;imag src="'+ image_path + image_none + '" alt="&amp;darr;"/&gt;&lt;/span&gt;&lt;/a&gt;';
		}
	}
	if (alternate_row_colors) {
		alternate(t);
	}
}
function ts_getInnerText(el) {
	if (typeof el == "string") return el;
	if (typeof el == "undefined") { return el };
	if (el.innerText) return el.innerText;	//Not needed but it is faster
	var str = "";
	
	var cs = el.childNodes;
	var l = cs.length;
	for (var i = 0; i &lt; l; i++) {
		switch (cs[i].nodeType) {
			case 1: //ELEMENT_NODE
				str += ts_getInnerText(cs[i]);
				break;
			case 3:	//TEXT_NODE
				str += cs[i].nodeValue;
				break;
		}
	}
	return str;
}
function ts_resortTable(lnk, clid) {
	var span;
	for (var ci=0;ci&lt;lnk.childNodes.length;ci++) {
		if (lnk.childNodes[ci].tagName &amp;&amp; lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
	}
	var spantext = ts_getInnerText(span);
	var td = lnk.parentNode;
	var column = clid || td.cellIndex;
	var t = getParent(td,'TABLE');
	// Work out a type for the column
	if (t.rows.length &lt;= 1) return;
	var itm = "";
	var i = 0;
	while (itm == "" &amp;&amp; i &lt; t.tBodies[0].rows.length) {
		var itm = ts_getInnerText(t.tBodies[0].rows[i].cells[column]);
		itm = trim(itm);
		if (itm.substr(0,4) == "&lt;!--" || itm.length == 0) {
			itm = "";
		}
		i++;
	}
	if (itm == "") return; 
	sortfn = ts_sort_caseinsensitive;
	if (itm.match(/^\d\d[\/\.-][a-zA-z][a-zA-Z][a-zA-Z][\/\.-]\d\d\d\d$/)) sortfn = ts_sort_date;
	if (itm.match(/^\d\d[\/\.-]\d\d[\/\.-]\d\d\d{2}?$/)) sortfn = ts_sort_date;
	if (itm.match(/^-?[£$€Û¢´]\d/)) sortfn = ts_sort_numeric;
	if (itm.match(/^-?(\d+[,\.]?)+(E[-+][\d]+)?%?$/)) sortfn = ts_sort_numeric;
	SORT_COLUMN_INDEX = column;
	var firstRow = new Array();
	var newRows = new Array();
	for (k=0;k&lt;t.tBodies.length;k++) {
		for (i=0;i&lt;t.tBodies[k].rows[0].length;i++) { 
			firstRow[i] = t.tBodies[k].rows[0][i]; 
		}
	}
	for (k=0;k&lt;t.tBodies.length;k++) {
		if (!thead) {
			// Skip the first row
			for (j=1;j&lt;t.tBodies[k].rows.length;j++) { 
				newRows[j-1] = t.tBodies[k].rows[j];
			}
		} else {
			// Do NOT skip the first row
			for (j=0;j&lt;t.tBodies[k].rows.length;j++) { 
				newRows[j] = t.tBodies[k].rows[j];
			}
		}
	}
	newRows.sort(sortfn);
	if (span.getAttribute("sortdir") == 'down') {
			ARROW = '&amp;nbsp;&amp;nbsp;&lt;imag src="'+ image_path + image_down + '" alt="&amp;darr;"/&gt;';
			newRows.reverse();
			span.setAttribute('sortdir','up');
	} else {
			ARROW = '&amp;nbsp;&amp;nbsp;&lt;imag src="'+ image_path + image_up + '" alt="&amp;uarr;"/&gt;';
			span.setAttribute('sortdir','down');
	} 
    // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
    // don't do sortbottom rows
    for (i=0; i&lt;newRows.length; i++) { 
		if (!newRows[i].className || (newRows[i].className &amp;&amp; (newRows[i].className.indexOf('sortbottom') == -1))) {
			t.tBodies[0].appendChild(newRows[i]);
		}
	}
    // do sortbottom rows only
    for (i=0; i&lt;newRows.length; i++) {
		if (newRows[i].className &amp;&amp; (newRows[i].className.indexOf('sortbottom') != -1)) 
			t.tBodies[0].appendChild(newRows[i]);
	}
	// Delete any other arrows there may be showing
	var allspans = document.getElementsByTagName("span");
	for (var ci=0;ci&lt;allspans.length;ci++) {
		if (allspans[ci].className == 'sortarrow') {
			if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
				allspans[ci].innerHTML = '&amp;nbsp;&amp;nbsp;&lt;imag src="'+ image_path + image_none + '" alt="&amp;darr;"/&gt;';
			}
		}
	}		
	span.innerHTML = ARROW;
	alternate(t);
}
function getParent(el, pTagName) {
	if (el == null) {
		return null;
	} else if (el.nodeType == 1 &amp;&amp; el.tagName.toLowerCase() == pTagName.toLowerCase()) {
		return el;
	} else {
		return getParent(el.parentNode, pTagName);
	}
}
function sort_date(date) {	
	// y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
	dt = "00000000";
	if (date.length == 11) {
		mtstr = date.substr(3,3);
		mtstr = mtstr.toLowerCase();
		switch(mtstr) {
			case "jan": var mt = "01"; break;
			case "feb": var mt = "02"; break;
			case "mar": var mt = "03"; break;
			case "apr": var mt = "04"; break;
			case "may": var mt = "05"; break;
			case "jun": var mt = "06"; break;
			case "jul": var mt = "07"; break;
			case "aug": var mt = "08"; break;
			case "sep": var mt = "09"; break;
			case "oct": var mt = "10"; break;
			case "nov": var mt = "11"; break;
			case "dec": var mt = "12"; break;
			// default: var mt = "00";
		}
		dt = date.substr(7,4)+mt+date.substr(0,2);
		return dt;
	} else if (date.length == 10) {
		if (europeandate == false) {
			dt = date.substr(6,4)+date.substr(0,2)+date.substr(3,2);
			return dt;
		} else {
			dt = date.substr(6,4)+date.substr(3,2)+date.substr(0,2);
			return dt;
		}
	} else if (date.length == 8) {
		yr = date.substr(6,2);
		if (parseInt(yr) &lt; 50) { 
			yr = '20'+yr; 
		} else { 
			yr = '19'+yr; 
		}
		if (europeandate == true) {
			dt = yr+date.substr(3,2)+date.substr(0,2);
			return dt;
		} else {
			dt = yr+date.substr(0,2)+date.substr(3,2);
			return dt;
		}
	}
	return dt;
}
function ts_sort_date(a,b) {
	dt1 = sort_date(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
	dt2 = sort_date(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
	
	if (dt1==dt2) {
		return 0;
	}
	if (dt1&lt;dt2) { 
		return -1;
	}
	return 1;
}
function ts_sort_numeric(a,b) {
	var aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
	aa = clean_num(aa);
	var bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
	bb = clean_num(bb);
	return compare_numeric(aa,bb);
}
function compare_numeric(a,b) {
	var a = parseFloat(a);
	a = (isNaN(a) ? 0 : a);
	var b = parseFloat(b);
	b = (isNaN(b) ? 0 : b);
	return a - b;
}
function ts_sort_caseinsensitive(a,b) {
	aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
	bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
	if (aa==bb) {
		return 0;
	}
	if (aa&lt;bb) {
		return -1;
	}
	return 1;
}
function ts_sort_default(a,b) {
	aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
	bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
	if (aa==bb) {
		return 0;
	}
	if (aa&lt;bb) {
		return -1;
	}
	return 1;
}
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,	NS6 and Mozilla
// By Scott Andrew
{
	if (elm.addEventListener){
		elm.addEventListener(evType, fn, useCapture);
		return true;
	} else if (elm.attachEvent){
		var r = elm.attachEvent("on"+evType, fn);
		return r;
	} else {
		alert("Handler could not be removed");
	}
}
function clean_num(str) {
	str = str.replace(new RegExp(/[^-?0-9.]/g),"");
	return str;
}
function trim(s) {
	return s.replace(/^\s+|\s+$/g, "");
}
function alternate(table) {
	// Take object table and get all it's tbodies.
	var tableBodies = table.getElementsByTagName("tbody");
	// Loop through these tbodies
	for (var i = 0; i &lt; tableBodies.length; i++) {
		// Take the tbody, and get all it's rows
		var tableRows = tableBodies[i].getElementsByTagName("tr");
		// Loop through these rows
		// Start at 1 because we want to leave the heading row untouched
		for (var j = 0; j &lt; tableRows.length; j++) {
			// Check if j is even, and apply classes for both possible results
			if ( (j % 2) == 0  ) {
				if ( !(tableRows[j].className.indexOf('odd') == -1) ) {
					tableRows[j].className = tableRows[j].className.replace('odd', 'even');
				} else {
					if ( tableRows[j].className.indexOf('even') == -1 ) {
						tableRows[j].className += " even";
					}
				}
			} else {
				if ( !(tableRows[j].className.indexOf('even') == -1) ) {
					tableRows[j].className = tableRows[j].className.replace('even', 'odd');
				} else {
					if ( tableRows[j].className.indexOf('odd') == -1 ) {
						tableRows[j].className += " odd";
					}
				}
			} 
		}
	}
}

Posted 31-Jan-11 17:57pm

igwtyes

Updated 31-Jan-11 18:02pm

Ankur^\m/

v2

Add a Solution

Comments

shakil0304003 1-Feb-11 0:48am

Large code!!!

Sunasara Imdadhusen 1-Feb-11 1:23am

No body could read whole code. You should provide only that code may contain problem!!

igwtyes 1-Feb-11 15:58pm

OriginalGriff read it. He/She took the time to count all 311 lines and write an extended comment, time I wished was used to just help me. Oh well, sorry to bother you folks. I think it may not be the length of code so much as the difficulty of the problem...thanks for all your help.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Accepted Answer · 2011-01-31T20:56:00

Solution 1

Nobody is going to wade through that much code: edit your question and cut it down to just the relevant code fragment.

Posted 31-Jan-11 20:56pm

OriginalGriff

Comments

igwtyes 1-Feb-11 10:49am

This was my first post here. I am very much a novice and began this work for non-profit organization. I am not sure what part of the code is "relevant". Sure I could have cut out the title and comment lines, but I was not sure what might be helpful to those willing to help me. Referring to code, "long", "too much" and "that much" are subjective terms. I did not think this was so much you would "drown" in it, sorry. But since you did look at it, why didn't you just paste in the "relevant" fragment? Are you here to help folks or just to be a "code length critic"? So, maybe my question should have been, "What is the relevant fragment of this code?". would that have been more palatable? These questions are rhetorical, no reply is desired...thanks for all the help!

OriginalGriff 1-Feb-11 14:41pm

You posted 311 lines of code (including comments)!
In order for you to work out what is relevant is a lot simpler than for us - who have never seen your code before - to first work out what it does, then work out what is relevant.

Ok, so you are a novice. We all started somewhere.
Ok, so you began this for a non-profit organisation. We don't get paid to answer questions: we do it because we have knowledge and are willing to pass it on to those who don't, for no charge. In that sense, we are at least a non-profit organisation, if not actively a charity.

Make it easy for us. Then we can help.
Make it hard for us to help, and we won't - we will get on with our paying work, or move to some other question which won't involve as much input of our time and energy.
Think about it!