非常强大的table根据表头排序,点击表头名称,对其内容排序

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

js代码:

/**
* 通过表头对表列进行排序
*
* @param sTableID
* 要处理的表ID<table id=''>
* @param iCol
* 字段列id eg: 0 1 2 3 ...
* @param sDataType
* 该字段数据类型 int,float,date 缺省情况下当字符串处理
*/
function orderByName(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 j = 0; j < aTRs.length; j++) {
oFragment.appendChild(aTRs[j]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
} /**
* 处理排序的字段类型
*
* @param sValue
* 字段值默认为字符类型即比较ASCII码
* @param sDataType
* 字段类型对于date只支持格式为mm/dd/yyyy或mmmm dd,yyyy(January 12,2004)
* @return
*/
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();
}
} /**
* 比较函数生成器
*
* @param iCol
* 数据行数
* @param sDataType
* 该行的数据类型
* @return
*/
function generateCompareTRs(iCol, sDataType) {
return function compareTRs(oTR1, oTR2) {
vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}

在table表中需要排序的列头添加事件,调用orderByName(sTableID, iCol, sDataType)即可.

三个参数第一个是表的id,第二个参数是第几列,第三个参数是类型,不写即为字符型.

注意列头如果不参与排序,放在另一个table中即可.

jsp部分示例代码:

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="import_tab" align="center">
<tbody>
<tr>
<td width="11%" class="borderTh" title="查询名称为空即其没有查询结果">名称(查询)</td>
<td width="6%" class="borderTh" title="经营状态为空表示其没有查询结果">经营状态</td>
<td width="11%" class="borderTh" title="点击可排序;Ctrl+F查找" onclick="orderByName('resultTab',2);">名称(所填企业名)</td>
<td width="10%" class="borderTh" >统一社会信用代码</td>
<td width="7%" class="borderTh" title="点击可排序" onclick="orderByName('resultTab',4,Date);">申请日期</td>
</tr>
</tbody>
</table>
<table id="resultTab" width="100%" border="0" cellpadding="0" cellspacing="0" class="import_tab" align="center">
<tbody>
<c:forEach items="${listItems}" var="wgl" varStatus="num">
<tr>
<td width="11%" class="borderTh" >${wgl.entname}</td>
<td width="6%" class="borderTh">${wgl.entstatus}</td>
<td width="11%" class="borderTh">${wgl.userName}</td>
<td width="10%" class="borderTh">${wgl.appCertificateNum}</td>
<td width="7%" class="borderTh"><fmt:formatDate value="${wgl.appDate}" type="date" dateStyle="long" /></td>
</tr>
</c:forEach>
</tbody>
</table>