jtarleton/js-sort.html

## js-sort.html
<!DOCTYPE html>
<head>
	<title>Javascript Object Sorting Exercise</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style type="text/css">
	.yella {
		background-color: yellow;
	}

	.arrow-up {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid #000;
	}

	.arrow-down {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #000;
	}
	</style>
</head>
<body>
	<h1>Fun with Object Sorting in Javascript</h1>
	<span id="output"></span>
</body>
<script type="text/javascript">
function getCurrentArrow(dir) {

	return (dir == 'asc') ? 'arrow-up' : 'arrow-down';
}

function getAvailableArrow(dir) {

	return (dir == 'asc') ? 'arrow-down' : 'arrow-up';
}

function getAvailableDir(dir) {

	return (dir == 'asc') ? 'desc' : 'asc';
}

function writeTableHeader(json1, fld, srtdir){

	tbl = '';
	tbl += '<tr>';

	for (q in json1.data[0]){

		klass= (q==fld) ? 'yella' : 'normal';

		srtmsg =  '<div title="Click to sort ' +  getAvailableDir(srtdir)  + '" class="headersrt '+ getAvailableArrow(srtdir) +'" style="cursor:pointer" id="' + q + ' ' + getAvailableDir(srtdir) + '">' + '</div>' ;

		srtinfo = (q==fld) ? ' ('+ srtdir + ')': '';

		tbl+='<th class="'+ klass +'">'+ q + ' ' + srtmsg + srtinfo + ' </th>';

	}

	tbl += '</tr>';

	return tbl;
}

function writeTableBody(json1, fld, srtdir){

	tbl = '';

	var dt = runsort(json1.data, fld, srtdir);

	jQuery.each(dt, function(i, obj){


	 tbl+= '<tr>';

	 for (q in obj){

	 	foo = eval("obj."+q);

	 tbl+='<td>'+ foo +'</td>';

	}

	 tbl += '</tr>';


	});

	return tbl;
}

function listenclick(){

	jQuery('.headersrt').click(function(){


		info = jQuery(this).attr('id');
		infoarr = info.split(' ');

		makeTbl(json1, infoarr[0], infoarr[1]);
	});
}


function makeTbl(json1, fld, srtdir){
	jQuery('#output').html('');

	tbl = '<p>Sorting on ' + fld + ' '+srtdir + '</p>';
	tbl += '<table border="1">';
	tbl += writeTableHeader(json1, fld, srtdir);
	tbl += writeTableBody(json1, fld, srtdir);
	tbl +='</table>';

	jQuery('#output').html(tbl);

	listenclick();

}

function runsort(arr, prop, dir) {

	if(dir == undefined)
		dir = 'asc';

	arr.sort(function(a, b){
		first  = eval("a."+prop);
		second = eval("b."+prop);

		if(first!=null)
		 	var nameA=first.toLowerCase();
		else
			var nameA = '';

		if(second!=null)
		 	var nameB=second.toLowerCase();
		else
			var nameB = '';

		switch(dir){

			case 'asc':

			default:

				if (nameA < nameB) //sort string ASCending
					return -1;
				if (nameA > nameB)
					return 1;
				break;

			case 'desc':

				if (nameA > nameB) //sort string DESCending
					return -1;
				if (nameA < nameB)
					return 1;
				break;
		}

		return 0; //default return value (no sorting)
	});

	return arr;
}

sortMe = '{"error": false,"numFound": 21,"data": [{"first": "David","last": "Smith","zip": "00142"},{"first": "Beth","last": "Davidson","zip": "12342"},{"first": "Amy","last": "Roberts","zip": "12342"},{"first": "Danielle","last": "Samuleson","zip": "12342"},';
sortMe +='{"first": "Franco","last": "Spinoza","zip": "81342"},';
sortMe +='{"first": "Erica","last": "Jones","zip": "92942"},';
sortMe +='{"first": "Amy","last": "Williams","zip": "55342"},';
sortMe +='{"first": "Teresa","last": "Estancia","zip": "62342"},';
sortMe +='{"first": "Amy","last": "LaSalle","zip": "77342"},';
sortMe +='{"first": "John","last": "Roberts","zip": "92342"}';
sortMe += '],';
sortMe +='"start": 0,';
sortMe +='"page": "1",';
sortMe +='"limit": "50",';
sortMe +='"term": "Foo"';
sortMe +='}';

jQuery(document).ready(function(){
	fld    = 'first';
	srtdir = 'asc';
	json1            = jQuery.parseJSON(sortMe);
	makeTbl(json1, fld, srtdir);
	listenclick();
});

</script>
</html>
	<!DOCTYPE html>
	<head>
	<title>Javascript Object Sorting Exercise</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style type="text/css">
	.yella {
	background-color: yellow;
	}

	.arrow-up {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #000;
	}

	.arrow-down {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #000;
	}
	</style>
	</head>
	<body>
	<h1>Fun with Object Sorting in Javascript</h1>
	<span id="output"></span>
	</body>
	<script type="text/javascript">
	function getCurrentArrow(dir) {

	return (dir == 'asc') ? 'arrow-up' : 'arrow-down';
	}

	function getAvailableArrow(dir) {

	return (dir == 'asc') ? 'arrow-down' : 'arrow-up';
	}

	function getAvailableDir(dir) {

	return (dir == 'asc') ? 'desc' : 'asc';
	}

	function writeTableHeader(json1, fld, srtdir){

	tbl = '';
	tbl += '<tr>';

	for (q in json1.data[0]){

	klass= (q==fld) ? 'yella' : 'normal';

	srtmsg = '<div title="Click to sort ' + getAvailableDir(srtdir) + '" class="headersrt '+ getAvailableArrow(srtdir) +'" style="cursor:pointer" id="' + q + ' ' + getAvailableDir(srtdir) + '">' + '</div>' ;

	srtinfo = (q==fld) ? ' ('+ srtdir + ')': '';

	tbl+='<th class="'+ klass +'">'+ q + ' ' + srtmsg + srtinfo + ' </th>';

	}

	tbl += '</tr>';

	return tbl;
	}

	function writeTableBody(json1, fld, srtdir){

	tbl = '';

	var dt = runsort(json1.data, fld, srtdir);

	jQuery.each(dt, function(i, obj){


	tbl+= '<tr>';

	for (q in obj){

	foo = eval("obj."+q);

	tbl+='<td>'+ foo +'</td>';

	}

	tbl += '</tr>';


	});

	return tbl;
	}

	function listenclick(){

	jQuery('.headersrt').click(function(){


	info = jQuery(this).attr('id');
	infoarr = info.split(' ');

	makeTbl(json1, infoarr[0], infoarr[1]);
	});
	}


	function makeTbl(json1, fld, srtdir){
	jQuery('#output').html('');

	tbl = '<p>Sorting on ' + fld + ' '+srtdir + '</p>';
	tbl += '<table border="1">';
	tbl += writeTableHeader(json1, fld, srtdir);
	tbl += writeTableBody(json1, fld, srtdir);
	tbl +='</table>';

	jQuery('#output').html(tbl);

	listenclick();

	}

	function runsort(arr, prop, dir) {

	if(dir == undefined)
	dir = 'asc';

	arr.sort(function(a, b){
	first = eval("a."+prop);
	second = eval("b."+prop);

	if(first!=null)
	var nameA=first.toLowerCase();
	else
	var nameA = '';

	if(second!=null)
	var nameB=second.toLowerCase();
	else
	var nameB = '';

	switch(dir){

	case 'asc':

	default:

	if (nameA < nameB) //sort string ASCending
	return -1;
	if (nameA > nameB)
	return 1;
	break;

	case 'desc':

	if (nameA > nameB) //sort string DESCending
	return -1;
	if (nameA < nameB)
	return 1;
	break;
	}

	return 0; //default return value (no sorting)
	});

	return arr;
	}

	sortMe = '{"error": false,"numFound": 21,"data": [{"first": "David","last": "Smith","zip": "00142"},{"first": "Beth","last": "Davidson","zip": "12342"},{"first": "Amy","last": "Roberts","zip": "12342"},{"first": "Danielle","last": "Samuleson","zip": "12342"},';
	sortMe +='{"first": "Franco","last": "Spinoza","zip": "81342"},';
	sortMe +='{"first": "Erica","last": "Jones","zip": "92942"},';
	sortMe +='{"first": "Amy","last": "Williams","zip": "55342"},';
	sortMe +='{"first": "Teresa","last": "Estancia","zip": "62342"},';
	sortMe +='{"first": "Amy","last": "LaSalle","zip": "77342"},';
	sortMe +='{"first": "John","last": "Roberts","zip": "92342"}';
	sortMe += '],';
	sortMe +='"start": 0,';
	sortMe +='"page": "1",';
	sortMe +='"limit": "50",';
	sortMe +='"term": "Foo"';
	sortMe +='}';

	jQuery(document).ready(function(){
	fld = 'first';
	srtdir = 'asc';
	json1 = jQuery.parseJSON(sortMe);
	makeTbl(json1, fld, srtdir);
	listenclick();
	});

	</script>
	</html>