非常強大的table根據表頭排序,點擊表頭名稱,對其內容排序

js代碼:

    /**
     * 通過表頭對表列進行排序
     *
     * @param sTableID
     *            要處理的表ID<table id=''>
     * @param iCol
     *            字段列id eg: 0 1 2 3 ...
     * @param sDataType
     *            該字段數據類型 int,float,date 缺省情況下當字符串處理
     */
    function  orderByName(sTableID, iCol, sDataType) {
         var  oTable = document.getElementById(sTableID);
         var  oTBody = oTable.tBodies[0];
         var  colDataRows = oTBody.rows;
         var  aTRs =  new  Array;
         for  (  var  i = 0; i < colDataRows.length; i++) {
            aTRs[i] = colDataRows[i];
        }
         if  (oTable.sortCol == iCol) {
            aTRs.reverse();
        }  else  {
            aTRs.sort(generateCompareTRs(iCol, sDataType));
        }
         var  oFragment = document.createDocumentFragment();
         for  (  var  j = 0; j < aTRs.length; j++) {
            oFragment.appendChild(aTRs[j]);
        }
        oTBody.appendChild(oFragment);
        oTable.sortCol = iCol;
    }
    
    
    /**
     * 處理排序的字段類型
     *
     * @param sValue
     *            字段值 默認為字符類型即比較ASCII碼
     * @param sDataType
     *            字段類型 對於date只支持格式為mm/dd/yyyy或mmmm dd,yyyy(January 12,2004)
     * @return
     */
    function  convert(sValue, sDataType) {
         switch  (sDataType) {
         case   "int" :
             return  parseInt(sValue);
         case   "float" :
             return  parseFloat(sValue);
         case   "date" :
             return   new  Date(Date.parse(sValue));
         default :
             return  sValue.toString();
        }
    }
    
    
    /**
     * 比較函數生成器
     *
     * @param iCol
     *            數據行數
     * @param sDataType
     *            該行的數據類型
     * @return
     */
    function  generateCompareTRs(iCol, sDataType) {
         return   function  compareTRs(oTR1, oTR2) {
            vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
            vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
             if  (vValue1 < vValue2) {
                 return  -1;
            }  else   if  (vValue1 > vValue2) {
                 return  1;
            }  else  {
                 return  0;
            }
        };
    }

在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> 

如 日期排序的效果,再點擊即可轉換順序排序展示