鼠标点击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页面使用方式：

账单号
房型
房号
客源
渠道
客人姓名
客人手机
入住时间
预计退房时间
房价
押金金额
预授权
消费金额
余额
联房
会员类型
市场活动
状态
备注






合计：