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

Posted 2020-08-21 BigOcean

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> 

如 日期排序的效果,再点击即可转换顺序排序展示