javascript表格排序

最新推荐文章于 2024-01-31 18:01:15 发布

iteye_15712

最新推荐文章于 2024-01-31 18:01:15 发布

阅读量86

点赞数

分类专栏： JavaScript 文章标签： JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/iteye_15712/article/details/81791642

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

服务器端排序会导致大量的带宽占用，下面是用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("↓","↑");
						else
							oTable.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 οnclick="sortTable('tblSort', 0)" 
                        style="cursor:pointer">字符串</th>
                    <th οnclick="sortTable('tblSort', 1, 'date')" 
                        style="cursor:pointer">时间</th>
                    <th οnclick="sortTable('tblSort', 2, 'float')" 
                        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>

iteye_15712

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript表格排序

服务器端排序会导致大量的带宽占用，下面是用javascript进行客户端排序。在网上查到了几个比较简单的，但是对日期类型的排序有问题：有的是按字符串排的，有的只能对10/28/2009这种格式的有用。自己参照着又写了个。&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/h...
复制链接

扫一扫