使用js实现表头排序

工作中遇到需要表头排序的地方,我从网上参考很一些东西,汇总一下,写出来这个排序函数,这个运用了array对象的sort()方法,感觉还不错,实现的逻辑比较简单。还有就是排序列是时间格式,用到了正则表达式做了个替换,并转化为时间对象,这两点是整个排序所用到的关键技术

<html>
 <head>
 </head>
 <body>
  <table id="tbSort">
   <thead>
       <tr>
           <th onclick="sortTime(this);">日期</th><th>数字</th><th>字符串</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>2014-10-12 10:20</td>
           <td>1</td>
           <td>李孟宁</td>
       </tr>
       <tr>
           <td>2014-10-12 10:21</td>
           <td>1</td>
           <td>Tom</td>
       </tr>
       <tr>
           <td>2014-10-12 10:22</td>
           <td>1</td>
           <td>Jerry</td>
       </tr>
       <tr>
           <td>2014-10-11</td>
           <td>3</td>
           <td>Lina</td>
       </tr>
       <tr>
           <td>2014-4-22</td>
           <td>2</td>
           <td>Steven</td>
       </tr>
       <tr>
           <td>2014-11-1</td>
           <td>5</td>
           <td>John</td>
       </tr>
   </tbody>
  </table>
 </body>
  <script type="text/javascript">
      function sortTime(title) {                   //title参数是所点击的表头所在的单元格对象
          var a = title.cellIndex;                //获取其单元格在本列中的位置
          var table = document.getElementById("tbSort").tBodies[0];  //获取到table的第一个tbody对象(当然这里只有一个)
          var rows = table.rows;
          var arr = new Array();                        //声明一个array对象来储存rows
          for (var i = 1; i < rows.length; i++) {
              arr.push(rows[i]);                              //将rows存储至array数组
          }
          if (table.sortFlag == a) {            //使用table对象的sortFlag属性作为排序的标记,如果这个标记等于当前列,则按此列倒序输出
              arr.reverse();
          }
          else {                                       //如果排序的不是此列,则进行排序
              arr.sort(function(r1, r2) {             //使用array对象的sort函数,这里因为是日期时间排序,所以要给出自定义的比较函数来判断两个值的大小,
                  var t1 = new Date(r1.cells[a].innerHTML.replace(/-/g, "/"));      //格式为:function(a,b){}比较a,b返回比较结果
                  var t2 = new Date(r2.cells[a].innerHTML.replace(/-/g, "/"));                 //如果a>b,则返回正整数,a=b返回0,a<b返回负整数
                  if (t1 < t2) return -1;                                                                         //replace函数进行正则表达式的替换,然后创建出t1,t2的Date类型的变量,以便比较
                  else if (t1 > t2) return 1; 
                  else return 0;
              });
          }
          for (var i = 0; i < arr.length; i++) {
              table.appendChild(arr[i]);                      //将排序结果输出到table中。
          }
          table.sortFlag = a;
      }
  </script>

时间: 2024-10-05 06:33:33

使用js实现表头排序的相关文章

JSP点击表头排序

table.html <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="tablesortT.js"></script> <link type="text/css" rel=&qu

javascript: 带分组数据的Table表头排序

如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <htm

根据表头排序

1 <%-- 2 Created by IntelliJ IDEA. 3 User: Administrator 4 Date: 2014/6/12 5 Time: 15:57 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %

Jquery 表头 排序

原文:Jquery 表头 排序 源代码下载地址:http://www.zuidaima.com/share/1550463782128640.htm

JS中对象排序

详细代码如下: var s=[{name:"abc",value:10},{name:"dbc",value:5},{name:"acc",value:15},{name:"ebc",value:50},{name:"bbc",value:80},{name:"aca",value:60}] //JS Object字符串排序 s.sort(function(a,b){ return a[

大数据集报表点击表头排序

在润乾官方在线 demo的 "交互报表" 中,有介绍 "点击表头排序" 的报表案例,该报表针对普通统计类报表.对于使用大数据集的报表,当按照此方式改造时发现排序没起作用或仅对第一页或前几页排序,后面的都没成功. 要想了解啥原因导致?就需要分析该报表的做法及知道大数据集的取数原理. 首先,来分析下在线 demo“点击报表排序”的做法. 润乾报表中实现排序的方式有两种: 1. 借助数据集 sql,即 order by … 2. 数据集函数 如ds.select() 都有

使用JS实现表格排序

功能:点击姓名.力量.智慧时,实现列排序. HTML: <!DOCTYPE html> <html> <head> <style type="text/css"> #tb{ border: 1px solid #ddd; } #tb tbody td{ border: 1px solid #ddd; } </style> <meta charset="utf-8"> <title>&

非常强大的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 oTab

Datatables js 复杂表头 合并单元格

x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官网上也查到了[复杂表头(rowspan 和 colspan)(Complex headers (rowspan and colspan))],[复杂表头], 但是只是html代码,蛋疼啊... 后来看到了[创建行回调(Row created callback)]哪里的时候 ,豁然开朗!!!   先上