非常强大的table根据表头排序,点击表头名称,对其内容排序
js代码:
1 /** 2 * 通过表头对表列进行排序 3 * 4 * @param sTableID 5 * 要处理的表ID<table id=''> 6 * @param iCol 7 * 字段列id eg: 0 1 2 3 ... 8 * @param sDataType 9 * 该字段数据类型 int,float,date 缺省情况下当字符串处理 10 */ 11 function orderByName(sTableID, iCol, sDataType) { 12 var oTable = document.getElementById(sTableID); 13 var oTBody = oTable.tBodies[0]; 14 var colDataRows = oTBody.rows; 15 var aTRs = new Array; 16 for ( var i = 0; i < colDataRows.length; i++) { 17 aTRs[i] = colDataRows[i]; 18 } 19 if (oTable.sortCol == iCol) { 20 aTRs.reverse(); 21 } else { 22 aTRs.sort(generateCompareTRs(iCol, sDataType)); 23 } 24 var oFragment = document.createDocumentFragment(); 25 for ( var j = 0; j < aTRs.length; j++) { 26 oFragment.appendChild(aTRs[j]); 27 } 28 oTBody.appendChild(oFragment); 29 oTable.sortCol = iCol; 30 } 31 32 33 /** 34 * 处理排序的字段类型 35 * 36 * @param sValue 37 * 字段值 默认为字符类型即比较ASCII码 38 * @param sDataType 39 * 字段类型 对于date只支持格式为mm/dd/yyyy或mmmm dd,yyyy(January 12,2004) 40 * @return 41 */ 42 function convert(sValue, sDataType) { 43 switch (sDataType) { 44 case "int" : 45 return parseInt(sValue); 46 case "float" : 47 return parseFloat(sValue); 48 case "date" : 49 return new Date(Date.parse(sValue)); 50 default : 51 return sValue.toString(); 52 } 53 } 54 55 56 /** 57 * 比较函数生成器 58 * 59 * @param iCol 60 * 数据行数 61 * @param sDataType 62 * 该行的数据类型 63 * @return 64 */ 65 function generateCompareTRs(iCol, sDataType) { 66 return function compareTRs(oTR1, oTR2) { 67 vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); 68 vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); 69 if (vValue1 < vValue2) { 70 return -1; 71 } else if (vValue1 > vValue2) { 72 return 1; 73 } else { 74 return 0; 75 } 76 }; 77 }
在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>
如 日期排序的效果,再点击即可转换顺序排序展示
