以前学习js，没有意识到原来可以通过操作dom来对html表格进行排序。简单看了下书,关键是数组的一个sort方法传入一个自定义的比较函数，这个有点类似java的Collections.sort方法，然后自己实现一个简单的点击表头字段实现对应列的排序功能。
index.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="tableSort.js"></script>
<title>Insert title here</title>
</head>
<body onload="TableUtils.sort('sort-table')">
<table id="sort-table" >
<thead>
<tr>
<th dataType="string">学号</th>
<th dataType="string">姓名</th>
<th dataType="number">年龄</th>
<th dataType="date">出生日期</th>
<th dataType="other">详细信息</th>
</tr>
</thead>
<tbody>
<tr>
<td>31130601</td>
<td>张三</td>
<td>22</td>
<td>1991-03-03</td>
<td><a href="#">button</a></td>
</tr>
<tr>
<td>31130612</td>
<td>李四</td>
<td>24</td>
<td>1989-04-12</td>
<td><a href="#">button</a></td>
</tr>
<tr>
<td>31130623</td>
<td>王五</td>
<td>21</td>
<td>1992-04-13</td>
<td><a href="#">button</a></td>
</tr>
<tr>
<td>31130601</td>
<td>钱六</td>
<td>18</td>
<td>1995-12-01</td>
<td><a href="#">button</a></td>
</tr>
</tbody>
</table>
</body>
</html>
页面比较简单，对于id为sort-table的table在onload事件中注册排序的功能。
核心的js如下：
var TableUtils = new Object();
TableUtils.sort = function(id){
var tb = document.getElementById(id);
//获取表头字段
var ths = tb.tHead.children[0].children;
//循环表头对每一列根据字段类型分别注册排序功能
for(var x in ths){
ths[x].style.cursor = 'pointer';
//默认为顺序排列
ths[x].setAttribute("order","ASC");
ths[x].onclick = function(e){
var t = 0;
//获取指定的列对象的序号
for(var i in ths){
if(ths[i].innerHTML == e.target.innerHTML){
t = i;
}
}
var trs = tb.tBodies[0].rows;
var arr = new Array();
//将指定列的所有单元格放入数组中
for(var i=0;i<=trs.length-1;i++){
arr.push(trs[i].cells[t]);
}
//获取字段类型，根据字段类型指定比较方法
var dataType = e.target.getAttribute("dataType");
if(dataType == "string"){
arr.sort(TableUtils.compareString);
}else if(dataType == "number"){
arr.sort(TableUtils.compareNumber);
}else if(dataType == "date"){
arr.sort(TableUtils.compareDate);
}
//获取排序的方式顺序或者降序
var order = e.target.getAttribute("order");
if(order == "ASC"){
//降序则通过reverse方法倒置结果
arr.reverse();
e.target.setAttribute("order","DESC");
}else{
e.target.setAttribute("order","ASC");
}
//创建dom节点集插入到tbody中完成排序
var frag = document.createDocumentFragment();
for(var i=0;i<=arr.length-1;i++){
//插入所有tr节点
frag.appendChild(arr[i].parentNode);
}
tb.tBodies[0].appendChild(frag);
};
if(x>=(ths.length-1)) break;
}
};
TableUtils.compareString = function(p1,p2){
var pV1 = p1.firstChild.nodeValue;
var pV2 = p2.firstChild.nodeValue;
return pV1.localeCompare(pV2);
};
TableUtils.compareNumber = function(p1,p2){
var pV1 = p1.firstChild.nodeValue;
var pV2 = p2.firstChild.nodeValue;
if(pV1 > pV2){
return 1;
}else if(pV1 == pV2){
return 0;
}else{
return -1;
}
};
TableUtils.compareDate = function(p1,p2){
var pV1 = p1.firstChild.nodeValue;
var pV2 = p2.firstChild.nodeValue;
var ymd1 = pV1.split("-");
var ymd2 = pV2.split("-");
if(ymd1[0] > ymd2[0] || (ymd1[0] == ymd2[0] && ymd1[1] > ymd2[1])
|| (ymd1[0] == ymd2[0] && ymd1[1] == ymd2[1] && ymd1[2] > ymd2[2])){
return 1;
}else if(ymd1[0] == ymd2[0] && ymd1[1] == ymd2[1] && ymd1[2] == ymd2[2]){
return 0;
}else{
return -1;
}
return -1;
};
具体代码实现，见注释。这样即使在加一列，只要指定了dataType（string,number或者date类型）就可以进行排序了。
下面是书上的例子
<html>
<head>
<title>Table Sort Example</title>
<script type="text/javascript">
function convert(sValue, sDataType) {
switch(sDataType) {
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString();
}
}
function generateCompareTRs(iCol, sDataType) {
return function compareTRs(oTR1, oTR2) {
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
function sortTable(sTableID, iCol, sDataType) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
aTRs.sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++) {
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}
</script>
</head>
<body>
<p>Click on the table header to sort in ascending order.</p>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort', 0)"
style="cursor:pointer">Last Name</th>
<th onclick="sortTable('tblSort', 1)"
style="cursor:pointer">First Name</th>
<th onclick="sortTable('tblSort', 2, 'date')"
style="cursor:pointer">Birthday</th>
<th onclick="sortTable('tblSort', 3, 'int')"
style="cursor:pointer">Siblings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr>
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>1/14/2000</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
个人感觉把事件监听也封装到js里比较好，便于扩展，而且也减少html的代码毕竟html是主要负责做展现的不应有太多的逻辑事件处理。