鼠标点击html表格表头实现表格数据自定义排序

/**
 * 表格数据自定义排序，数据按int（float、string、date）进行升序或降序排列  
 */
// 排序 tableId: 表的id,iCol:第几列从0开始 ；dataType：iCol对应的列显示数据的数据类型，例如：日期就是date
function sortAble(th, tableId, iCol, dataType) {

	var ascChar = "▲";
	var descChar = "▼";

	var table = document.getElementById(tableId);

	// 排序标题加背景色
	for (var t = 0; t < table.tHead.rows[0].cells.length; t++) {
		var th = $(table.tHead.rows[0].cells[t]);
		var thText = th.html().replace(ascChar, "").replace(descChar, "");
		if (t == iCol) {
			th.css("background-color", "#ccc");
		} else {
			th.css("background-color", "#d2d8de");
			th.html(thText);
		}

	}

	var tbody = table.tBodies[0];
	var colRows = tbody.rows;
	var aTrs = new Array;

	// 将得到的行放入数组，备用
	for (var i = 0; i < colRows.length; i++) {
		// 注：如果要求“分组明细不参与排序”，把下面的注释去掉即可
		// if ($(colRows[i]).attr("group") != undefined) {
		aTrs.push(colRows[i]);
		// }
	}

	// 判断上一次排列的列和现在需要排列的是否同一个。
	var thCol = $(table.tHead.rows[0].cells[iCol]);
	if (table.sortCol == iCol) {
		aTrs.reverse();
	} else {
		// 如果不是同一列，使用数组的sort方法，传进排序函数
		aTrs.sort(compareEle(iCol, dataType));
	}

	var oFragment = document.createDocumentFragment();
	for (var i = 0; i < aTrs.length; i++) {
		oFragment.appendChild(aTrs[i]);
	}
	tbody.appendChild(oFragment);

	// 记录最后一次排序的列索引
	table.sortCol = iCol;

	// 给排序标题加“升序、降序” 小图标显示
	var th = $(table.tHead.rows[0].cells[iCol]);
	if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) {
		th.html(th.html() + ascChar);
	} else if (th.html().indexOf(ascChar) != -1) {
		th.html(th.html().replace(ascChar, descChar));
	} else if (th.html().indexOf(descChar) != -1) {
		th.html(th.html().replace(descChar, ascChar));
	}

	// 重新整理分组
	var subRows = $("#" + tableId + " tr[parent]");
	for (var t = subRows.length - 1; t >= 0; t--) {
		var parent = $("#" + tableId + " tr[group='"
				+ $(subRows[t]).attr("parent") + "']");
		parent.after($(subRows[t]));
	}
}

// 将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
	switch (dataType) {
	case "int":
		return parseInt(sValue, 10);
	case "float":
		return parseFloat(sValue);
	case "date":
		return new Date(Date.parse(sValue));
	case "string":
	default:
		return sValue.toString();
	}
}

// 排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
	return function(oTR1, oTR2) {

		var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()),
				dataType);
		var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()),
				dataType);
		if (vValue1 < vValue2) {
			return -1;
		} else {
			return 1;
		}

	};
}

// 去掉html标签
function removeHtmlTag(html) {
	return html.replace(/<[^>]+>/g, "");

}

html页面使用方式：

<table id="living_table" class="table dataTable display">
<thead>
<tr>
<th onclick="sortAble(this,'living_table', 0,'string')">账单号</th>
<th onclick="sortAble(this,'living_table', 1,'string')">房型</th>
<th onclick="sortAble(this,'living_table', 2,'string')">房号</th>
<th onclick="sortAble(this,'living_table', 3,'string')">客源</th>
<th onclick="sortAble(this,'living_table', 4,'string')">渠道</th>
<th onclick="sortAble(this,'living_table', 5,'string')">客人姓名</th>
<th onclick="sortAble(this,'living_table', 6,'string')">客人手机</th>
<th onclick="sortAble(this,'living_table', 7,'date')">入住时间</th>
<th onclick="sortAble(this,'living_table', 8,'date')">预计退房时间</th>
<th onclick="sortAble(this,'living_table', 9,'float')">房价</th>
<th onclick="sortAble(this,'living_table', 10,'float')">押金金额</th>
<th onclick="sortAble(this,'living_table', 11,'float')">预授权</th>
<th onclick="sortAble(this,'living_table', 12,'float')">消费金额</th>
<th onclick="sortAble(this,'living_table', 13,'float')">余额</th>
<th onclick="sortAble(this,'living_table', 14,'string')">联房</th>
<th onclick="sortAble(this,'living_table', 15,'string')">会员类型</th>
<th onclick="sortAble(this,'living_table', 16,'string')">市场活动</th>
<th onclick="sortAble(this,'living_table', 17,'string')">状态</th>
<th onclick="sortAble(this,'living_table', 18,'string')">备注</th>
</tr>
</thead>
<tbody id="mouse"></tbody>
<!-- tbody是必须的 -->
<tfoot>
<tr id="zj">
<td>合计：</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>