sort html table by js

伊苏

浏览: 111500 次
性别:
来自: 深圳

最近访客更多访客>>

liuqu11

xphoenix

rubskin

shanmeimeia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

html javascript

it's efficient to sort a table in HTML with Javascript.
to solve it. the focus is keep the event itself.
I do it for non-IE and IE with respective js code

first, let's build up the test html environment

<html>
	<head>
		<title>demo table sort</title>
		<script src="js/SortUtil.js" type="text/javascript"></script>
		<style>
			#t {
				border-collapse: collapse;
			}
			#t td {
				text-align: center;
				border: 1px solid #ccc;
			}
			#t tr:nth-child(odd){
				background-color: #eee;
			}
			#t tr:first-child {
				font-weight: bold;
				background-color: #ddd;
			}
			.divText span {
				width: 150px;
				display: inline-block;
			}
		</style>
		<script>
			var $=function(id){
				return document.getElementById(id);
			}
			window.onload=function(){
			}
			var asc=1;
			function sort(){
				var startRow=$("startRow").value;
				var sortIndex=$("sortIndex").value;
				var sortKey=$("sortKey").value;
				var asc=($("rad1").checked)?1:0;
				asc=(1==asc)?0:1;
				var reg=/explorer/i;
				var isIE=reg.test(navigator.appName);
//				SortUtil.sortTable($("t"), startRow, sortIndex);
				SortUtil.sortTable($("t"), startRow, sortIndex, sortKey, asc, isIE);
			}
		</script>
	</head>
	<body>
		<table id="t">
			<tr>
				<td>title1</td><td>title2</td><td>title3</td><td>title4</td>
			</tr>
			<tr>
				<td sortvalue="9">1</td><td>a</td><td>a</td><td>12</td>
			</tr>
			<tr>
				<td sortvalue="8">2</td><td>b</td><td>b</td><td>22</td>
			</tr>
			<tr>
				<td sortvalue="7">3</td><td>c</td><td>c</td><td>23</td>
			</tr>
			<tr>
				<td sortvalue="6">4</td><td>d</td><td>a</td><td>4</td>
			</tr>
			<tr>
				<td sortvalue="5">05</td><td>e</td><td>b</td><td>8</td>
			</tr>
			<tr>
				<td sortvalue="4">6</td><td>f</td><td>c</td><td>6</td>
			</tr>
			<tr>
				<td sortvalue="3">17</td><td>g</td><td>a</td><td>16</td>
			</tr>
			<tr>
				<td sortvalue="2">08</td><td>h</td><td>b</td><td>12</td>
			</tr>
			<tr>
				<td sortvalue="1">12</td><td>i</td><td>c</td><td>20</td>
			</tr>
		</table>
		<hr />
		<div class="divText">
			<span>sort row start at:</span><input type="text" id="startRow" value="1" /><br />
			<span>sortcolumn:</span><input type="text" id="sortIndex" value="0" /><br />
			<span>sortproperty:</span><input type="text" id="sortKey" value="0" /><br />
			<span>order by:</span><input id="rad1" name="sortOrder" type="radio" value="1" checked="checked" /><label for="rad1">DESC</label><input type="radio" id="rad2" name="sortOrder" style="margin-left: 20px" value="0" /><label for="rad2">ASC</label><br />
			<input type="button" style="width:80;" value="sort" onclick="sort()" />
		</div>
	</body>
</html>

the GUI as below

second, coding js

(function(){
	var array;
	var table;
	var startRow=1;
	var sortIndex=0;
	var sortKey;
	var asc=1;
	var isIE=false;
	
	var SortUtil=function(){
		return SortUtil;
	}
	this.SortUtil=SortUtil;
	SortUtil.sortTable=function(_table, _startRow, _sortIndex, _sortKey, _asc, _isIE){
		table=_table;
		startRow=_startRow;
		sortIndex=(undefined==_sortIndex || null==_sortIndex)?0:_sortIndex;
		sortKey=(undefined==_sortKey || null==_sortKey)?"":_sortKey;
		asc=(undefined==_asc || null==_asc)?1:_asc;
		isIE=(undefined==_isIE || null==_isIE)?false:_isIE;
		
		(isIE)?readData_IE():readData();
		sortData();
		writeData();
	}
	function readData(){
		array=new Array();
		try{
			var len=table.rows.length;
			for(var i=0;i<len-startRow;i++){
				array.push(table.rows[len-i-1]);
				table.deleteRow(-1);
			}
		}catch(err){
			alert("read data: "+err);
		}
	}
	function readData_IE(){
		array=new Array();
		try{
			var len=table.rows.length;
			for(var i=0;i<len-startRow;i++){
				array.push(table.rows[len-i-1].cloneNode(true));
				table.deleteRow(-1);
			}
		}catch(err){
			alert("read data: "+err);
		}
	}
	function sortData(){
		try{
			var sortMethod=(isIE)?sortArithmetic_IE:sortArithmetic;
			array.sort(sortMethod);
		}catch(err){
			alert("sort data: "+err);
		}
	}
	function writeData(){
		try{
			var len=array.length;
			for(var i=0;i<len;i++){
				table.tBodies[0].appendChild(array[i]);
//					table.appendChild(array[i]);
			}
		}catch(err){
			alert("write data: "+err);
		}
	}
	function sortArithmetic(a, b){
		var x, y, flag;
		x=a.cells[sortIndex].getAttribute(sortKey);
		y=b.cells[sortIndex].getAttribute(sortKey);
		if(null==x)
			x=a.cells[sortIndex].innerHTML;
		if(null==y)
			y=b.cells[sortIndex].innerHTML;
		if(isNaN(x) || isNaN(y)){
			flag=(1==asc)?compareText(x, y):compareText(y, x);
		}else{
			flag=(1==asc)?x-y:y-x;
		}
		if(NaN==flag)
			flag=0;
		return flag;
	}
	function sortArithmetic_IE(a, b){
		var x, y, flag;
		x=a.childNodes[sortIndex].getAttribute(sortKey);
		y=b.childNodes[sortIndex].getAttribute(sortKey);
		if(null==x)
			x=a.childNodes[sortIndex].innerHTML;
		if(null==y)
			y=b.childNodes[sortIndex].innerHTML;
		if(isNaN(x) || isNaN(y)){
			flag=(1==asc)?compareText(x, y):compareText(y, x);
		}else{
			flag=(1==asc)?x-y:y-x;
		}
		if(NaN==flag)
			flag=0;
		return flag;
	}
	function compareText(a, b){
		var arrayA=new Array();
		var arrayB=new Array();
		for(var i=0;i<a.length;i++){
			arrayA.push(a.charCodeAt(i));
		}
		for(var i=0;i<b.length;i++){
			arrayB.push(b.charCodeAt(i));
		}
		var len=(arrayA.length>=arrayB.length)?arrayA.length:arrayB.length;
		for(var i=0;i<len;i++){
			var x=arrayA[i];
			var y=arrayB[i];
			var flag=x-y;
			if(flag!=0)
				return flag;
		}
	}
})();

save to "images/SortUtil.js" to linked by html
now, it's done.

---------------------------
note:
1.in sort arithmetic method, as per tr have been removed from table, so it's not support to access cell node by method: tr.cells[?] in IE, but it's support by FF, Chrome. so we use childNode to instead for access cell node.
2.in IE, it's forbidden to (tr) appendChild to table directly. it muse appendChild to tBodies[0]. the issue is not exist in FF, Chrome also.