Process of implementation at the client are on the table to sort, has the following characteristics:
1. Custom sort out, sorting attributes (such as innerHTML), sort data types (including int, float, date, string), sort order (the order and reverse order);
2. Custom sort function;
3. May at the same time to set up a number to sort out;
4. Supporting ie / ff.

Online also has a lot of other table sort function, but some because of the array, and some not enough flexibility. This can be at my table structure on the original add features, not too many changes to the structure of oo-based easy-to-use (of course the premise is a must have recognize js). Here only to meet basic needs, interface probably is not perfect, you can expand yourself.

Basic steps:

1, put the line on the required sort tbody Medium (process will have direct access tbody's rows);
2, put into a sorting line array;

Each(this.tBody.rows, function(o){ this.Rows.push(o); }.bind(this));

3, according to the needs of the array sort (array sort method used);

this.Rows.sort(!this._order.Compare ? this.Compare.bind(this) : this._order.Compare);

4, using a document fragment (document.createDocumentFragment ()) to preserve good order row line;

var oFragment = document.createDocumentFragment();
Each(this.Rows, function(o){ oFragment.appendChild(o); });

5, put the document to the tbody in appendChile debris.

this.tBody.appendChild(oFragment);

Procedure Description:

【Function】 sort

Sort on the array have to say that sort this approach, the manual is the introduction: Return an element have been carried out to sort the Array object. That is sort of an array, with a lot of sort-related operations are used in this method.

Default in accordance with the ASCII characters in ascending order, the use of parameters, then can customize the sorting method.
Here in order to enable the sort to fit all types of value, defines a sort function as a parameter:

Compare: function(o1, o2) {
    var value1 = this.GetValue(o1), value2 = this.GetValue(o2);
    return value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
  },

for the characters used for localeCompare would be more convenient, but do not support date and number format, so here is less than the greater than its comparison to do. We should note that if the parameters for sortfunction provides a function, then the function must return one of the following values:
Negative, if the transmission of the first parameter smaller than the second parameter.
Zero, if the same two parameters.
When, if the first parameter large than the second parameter.
These are the sort to write a custom function to take note of.

【Access】 comparison value

A lot of time to compare the value of innerHTML is not a direct value, then how do put the value of this comparison? Here are my ways to set up a td to release the property value (such as _ext and _order), check this value also has a little skill, ie for use on the general approach can be taken, but the ff on the trouble that, for a number of custom sequence required to obtain use getAttribute on the original property (such as innerHTML) will need to td [ "property"] way to check:

var td = tr.getElementsByTagName("td")[this._order.Index], data = td[this._order.Attri] || td.getAttribute(this._order.Attri);

made in accordance with the value after the necessary data type conversion:

switch (this._order.DataType.toLowerCase()) {
        case "int":
            return parseInt(data) || 0;
        case "float":
            return parseFloat(data) || 0;
        case "date":
            return Date.parse(data) || 0;
        case "string":
        default:
            return data.toString() || "";
    }

described here are want to add a custom property is not a standard method, could be considered on the title of such property.

Sort objects】 【

Sort object is primarily used to preserve the sort of property, here including:
Property default value / / Help
Attri "innerHTML"; / / access to property data
DataType "string"; / / compare the data types
Down true; / / Whether or not sequence
Sort onSort function (){};// execution
Compare null; / / custom sort function
Have two fixed property:
Index: td Index
Sort: Set the current sort order for categories to sort objects, and to implement the sort

Usually have more than one table sorting, sorting the role of the object are preserved in all sort of parameters, sorting on the direct sequencing using the current object property, so that all Sort by independent on each other would not affect each other has.

Have the document here is not to be debris, but the proposed use, operation and use of substantial dom document debris would be more efficient.
The trigger here is a, but there is no frame by up, because I set the style:

a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/}

Usage:

First of all, a main sort instantiated object, parameter is the table of the id:

Then add a

var to = new TableOrder("idTable");

want to sort objects, the first parameter is the td index, the second parameter is the required set of attributes (reference object】 【sort):

var order2 = to.Add(0, {
    onSort: function(){ Each(SetOrder._arr, function(o){ o.className = ""; }); },
    Compare: function(o1, o2) {
        var value1 = /x/i.test(to.GetValue(o1)), value2 = /x/i.test(to.GetValue(o2));
        return value1 && !value2 ? 1 : !value1 && value2 ? -1 : 0;
    }
});

then set up a trigger object implementation of the Sort method to sort object to sort:

$("idBtn").onclick = function(){ order2.Sort(); }

Program source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Table排序</title>
</head>
<body>
<style type="text/css">
.fu_list{ width:500px; border:1px solid #ebebeb;line-height:20px; font-size:12px;}
.fu_list thead td{background-color:#ebebeb;}
.fu_list td{padding:5px;}
.fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/}
.fu_list a:link, .fu_list a:visited, .fu_list a:hover, .fu_list a:active{text-decoration:none;color:#333;}
.fu_list thead a{padding-right:15px;}
.fu_list thead a.up, .fu_list thead a.down{ background:url(http://www.fs12345.com/upphoto/cloud/5a539829-d9b9-4437-bc9c-20b32f1fc4b7.gif) right center no-repeat; }
.fu_list thead a.down{background-image:url(http://www.fs12345.com/upphoto/cloud/76a4b69b-38b8-4abd-8a58-82d2ade8d526.gif);}
</style>
<table border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <td>&nbsp;<a href="javascript:void(0)">名称</a> / <a href="javascript:void(0)">类型</a></td>
      <td width="150" align="center"><a href="javascript:void(0)">上传时间</a></td>
      <td width="50" align="center"><a href="javascript:void(0)">大小</a></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td _ext="rar">new.rar</td>
      <td align="center" _order="2008/9/12 8:51:09">2008-9-12 8:51:09</td>
      <td align="right" _order="433247">423.09 K</td>
    </tr>
    <tr>
      <td _ext="js">Scroller.js</td>
      <td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
      <td align="right" _order="2556">2.5 K</td>
    </tr>
    <tr>
      <td _ext="js">AlertBox.js</td>
      <td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
      <td align="right" _order="3565">3.48 K</td>
    </tr>
    <tr>
      <td _ext="htm">1.htm</td>
      <td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td>
      <td align="right" _order="11394">11.13 K</td>
    </tr>
    <tr>
      <td _ext="htm">4.htm</td>
      <td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td>
      <td align="right" _order="351">351 b</td>
    </tr>
    <tr>
      <td _ext="xml">news.xml</td>
      <td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
      <td align="right" _order="14074">13.74 K</td>
    </tr>
    <tr>
      <td _ext="js">function.js</td>
      <td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
      <td align="right" _order="2844">2.78 K</td>
    </tr>
    <tr>
      <td _ext="mp3">紫色头发</td>
      <td align="center" _order="2008/10/7 0:07:43">2008-10-7 0:07:43</td>
      <td align="right" _order="3111293">2.97 M</td>
    </tr>
    <tr>
      <td _ext="doc">详细功略+剧情流程（一）.doc</td>
      <td align="center" _order="2008/10/7 0:07:43">2008-10-7 0:07:43</td>
      <td align="right" _order="63488">62 K</td>
    </tr>
    <tr>
      <td _ext="doc">黑色头发.doc</td>
      <td align="center" _order="2008/10/7 0:07:54">2008-10-7 0:07:54</td>
      <td align="right" _order="164352">160.5 K</td>
    </tr>
    <tr>
      <td _ext="txt">禁止文件预览功能.txt</td>
      <td align="center" _order="2008/10/7 0:07:58">2008-10-7 0:07:58</td>
      <td align="right" _order="860">860 b</td>
    </tr>
  </tbody>
</table>
<input name="" type="button" value="有x的排前面" />
<script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
Object.extend = function(destination, source) {
	for (var property in source) {
		destination[property] = source[property];
	}
	return destination;
}

Function.prototype.bind = function(object) {
  var __method = this, args = Array.prototype.slice.call(arguments); args.shift();
  return function() {
	return __method.apply(object, args.concat(Array.prototype.slice.call(arguments)));
  }
}

function Each(list, fun){
	for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};


var TableOrder = Class.create();
TableOrder.prototype = {
  initialize: function(table) {
	this.tBody = $(table).tBodies[0];//tbody对象
	this.Rows = [];//行集合
	this._order = null;//排序对象
	
	Each(this.tBody.rows, function(o){ this.Rows.push(o); }.bind(this));
  },
  //排序并显示
  Sort: function() {
	//没有排序对象返回
	if(!this._order){ return false };
	//排序
	this.Rows.sort(this._order.Compare || this.Compare.bind(this));
	this._order.Down && this.Rows.reverse();//取反
	//显示表格
	var oFragment = document.createDocumentFragment();
	Each(this.Rows, function(o){ oFragment.appendChild(o); });
	this.tBody.appendChild(oFragment);
	//执行附加函数
	this._order.onSort();
  },
  //比较函数
  Compare: function(o1, o2) {
	var value1 = this.GetValue(o1), value2 = this.GetValue(o2);
	return value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
  },
  //获取比较值
  GetValue: function(tr) {
	var td = tr.getElementsByTagName("td")[this._order.Index], data = td[this._order.Attri] || td.getAttribute(this._order.Attri);
	
	//数据转换
	switch (this._order.DataType.toLowerCase()) {
		case "int":
			return parseInt(data) || 0;
		case "float":
			return parseFloat(data) || 0;
		case "date":
			return Date.parse(data) || 0;
		case "string":
		default:
			return data.toString() || "";
	}
  },
  //添加并返回一个排序对象
  Add: function(index, options) {
	var oThis = this;
	return new function(){
		//默认属性
		this.Attri = "innerHTML";//获取数据的属性
		this.DataType = "string";//比较的数据类型
		this.Down = true;//是否按顺序
		this.onSort = function(){};//排序时执行
		this.Compare = null;//自定义排序函数
		Object.extend(this, options || {});
		//td索引
		this.Index = index;
		this.Sort = function(){ oThis._order = this; oThis.Sort(); };
	};
  }
}

var to = new TableOrder("idTable");
function SetOrder(obj, index, options){
	var o = $(obj);
	//_arr是记录排序项目（这里主要用来设置样式）
	!SetOrder._arr && (SetOrder._arr = []); SetOrder._arr.push(o);
	//添加一个排序对象
	var order = to.Add(index, options);
	order.onSort = function(){
		//设置样式
		Each(SetOrder._arr, function(o){ o.className = ""; });
		o.className = order.Down ? "down" : "up";
		//取相反排序
		order.Down = !order.Down
	}
	o.onclick = function(){ order.Sort(); return false; }
}
SetOrder("idTitle", 0);
SetOrder("idExt", 0, { Attri: "_ext" });
SetOrder("idAddtime", 1, { Attri: "_order", DataType: "date" });
SetOrder("idSize", 2, { Attri: "_order", DataType: "int" });

var order2 = to.Add(0, {
	onSort: function(){ Each(SetOrder._arr, function(o){ o.className = ""; }); },
	Compare: function(o1, o2) {
		var value1 = /x/i.test(to.GetValue(o1)), value2 = /x/i.test(to.GetValue(o2));
		return value1 && !value2 ? 1 : !value1 && value2 ? -1 : 0;
	}
});
$("idBtn").onclick = function(){ order2.Sort(); }
</script>
</body>
</html>

Transfer from: http://www.cnblogs.com/cloudgamer/archive/2008/10/06/1304414.html

Black hair: http://heisetoufa.javaeye.com/