javascript表格排序

太阳神喻 · 发表于 2013-2-7 14:41:52

服务器端排序会导致大量的带宽占用，下面是用javascript进行客户端排序。
在网上查到了几个比较简单的，但是对日期类型的排序有问题：有的是按字符串排的，有的只能对10/28/2009这种格式的有用。自己参照着又写了个。

<html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>客户端表格排序</title> <script type="text/javascript"> //转换器，将列的字段类型转换为可以排序的类型：String,int,float function convert(sValue, sDataType) { switch(sDataType) { case "int": return parseInt(sValue); case "float": return parseFloat(sValue); case "date": return Date.parse(sValue.replace(/\-/g,"/"));//把日期型转换为整数:距离1970-1-1 00:00:00的毫秒数 default: return sValue.toString(); } } //排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型 function generateCompareTRs(iCol, sDataType) { return function compareTRs(oTR1, oTR2) { var value1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);//获得上一个单元格的值 var value2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);//获得下一个单元格的值 if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } }; } //排序表格的方法,sTableID：表格的ID, iCol：列的索引, sDataType：列的类型 function sortTable(sTableID, iCol, sDataType) { var oTable = document.getElementById(sTableID); var oTBody = oTable.tBodies[0];//得到表格的内容部分 var aRows = oTBody.rows;//得到表格体的行对象的集合 var aTRs = new Array;//创建一个数组，胜于保存aRows中行引用。var oTheadCells = oTable.tHead.rows[0].cells;//没有升序降序的图片，用箭头表示了："↑"表示升序排列,"↓"：表示降序排列for(var i = 0; i < oTheadCells.length; i++){var lastChar = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.charAt(oTable.tHead.rows[0].cells[i].firstChild.nodeValue.length-1);if(i == iCol) {if(lastChar=='↑')oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.replace("↑","↓");else if(lastChar=='↓')oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.replace("↓","↑");elseoTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue + "↑";}else{oTable.tHead.rows[0].cells[i].firstChild.nodeValue = oTable.tHead.rows[0].cells[i].firstChild.nodeValue.replace("↑","").replace("↓","");}} //将所有列放入数组 for (var i=0; i < aRows.length; i++) { aTRs[i] = aRows[i]; } //判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序 if (oTable.sortCol == iCol) { aTRs.reverse(); } else { //使用数组的sort方法，传进排序函数 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>点击表格标题进行排序</p> <table border="1" id="tblSort"> <thead> <tr> <th style="cursor:pointer">字符串</th> <th style="cursor:pointer">时间</th> <th style="cursor:pointer">数字</th> </tr> </thead> <tbody> <tr> <td>张</td> <td>1986/10/28 20:20:20</td> <td>2</td> </tr> <tr> <td>张</td> <td>1986-10-28 20:10:20</td> <td>2</td> </tr> <tr> <td>王</td> <td>2009-10-1</td> <td>4</td> </tr> <tr> <td>李</td> <td>1949-10-1</td> <td>1.2</td> </tr> <tr> <td>赵</td> <td>2002-5-8</td> <td>4.6</td> </tr> <tr> <td>James</td> <td>2029-10-8</td> <td>1</td> </tr> <tr> <td>Matthew</td> <td>2005-9-9</td> <td>3</td> </tr> </tbody> </table> </body></html>

		自动登录	找回密码
密码			立即注册

javascript表格排序

浏览过的版块