鼠标点击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>