在前不久做的一个web项目中，需要实现js表格排序的效果，当时为了省事，就在网上找了几个相关的js插件，像:jQuery的(感觉其使用比较麻烦或不清楚其具体用法，就没有使用)、原生态js的table排序插件等，最后比较看了下——采用了一个原生态js的table排序插件,并在其基础上做了些修改，虽有些勉强或有些地方使用不太舒服，但最算是比较好的实现了当时需要的功能。而前两天，对原有表格做了点儿修改——增加隔行换色的功能，问题就出现了，——效果错乱；检查分析了下，问题出在其table排序插件代码上——其原代码写的比较难理解，修改还不如重新自己写一个table排序插件。

      说写就写，其实很简单：就是取出所有排序列的值并存放在数组中(并且各列对应行对象也存放到一个数组中),然后对排序列的值数组排序(并对行对象数组排序)。下面贴出table排序插件代码：

1 /**  2 * @description     表格排序实现  3 * @author          Blog:http://www.cnblogs.com/know/  4 * @date            2011-10-28  5 * @modify date     2012-12-08  6 * @modify description     修改了对汉字排序有误的问题，可以实现字母汉字混排(其实现是：将汉字转换为全拼，统一按字母排序)  7 **/  8 (function () {  9     //#region 全局变量 10     //初始化配置对象 11     var _initConfig = null; 12     var _tableObj = null, _tbodyObj = null, _tBodyIndex = 0; 13     //存放当前各排序方式下的(有序)行数组的对象——仅在IsLazyMode=true，此变量有用 14     var _trJqObjArray_Obj = null; 15     //#endregion 16  17     //#region 内部方法 18     /** 19     * 获得排序列值数组的方法 20     * @private 21     * @param trJqObjArr：(外部传入)存放排序行的数组，tdIndex：排序列的索引，td_valAttr：排序列的取值属性，td_dataType：排序列的值类型 22     **/ 23     function GetOrderTdValueArray(trJqObjArr, tdIndex, td_valAttr, td_dataType) { 24         var tdOrderValArr = new Array(); 25         var trObj, tdObj, tdVal; 26         _tbodyObj.find("tr").each(function (trIndex, trItem) { 27             trObj = $(trItem); 28             trJqObjArr.push(trObj); 29  30             tdObj = trObj.find("td")[tdIndex]; 31             tdObj = $(tdObj); 32             tdVal = td_valAttr ? tdObj.attr(td_valAttr) : tdObj.text(); 33             tdVal = GetValue(tdVal, td_dataType); 34             tdOrderValArr.push(tdVal); 35         }); 36         return tdOrderValArr; 37     } 38  39     /** 40     * 返回jQuery对象的方法 41     * @private 42     **/ 43     function GetJqObj(id) { 44         return "string" == typeof (id) ? $("#" + id) : $(id); 45     }; 46  47     /** 48     * 排序方法 49     * @private 50     * @param tdIndex：排序列的索引,options：排序列的规则配置对象 51     **/ 52     function Sort(tdIndex, options) { 53         var trJqObjArr = null; 54         if (_initConfig.IsLazyMode) { 55             !_trJqObjArray_Obj && (_trJqObjArray_Obj = {}); 56             trJqObjArr = _trJqObjArray_Obj[tdIndex]; 57         } 58         var isExist_trJqObjArr = true; 59         if (!trJqObjArr) { 60             isExist_trJqObjArr = false; 61             trJqObjArr = new Array(); 62             var tdOrderValArr = GetOrderTdValueArray(trJqObjArr, tdIndex, options.ValAttr, options.DataType); 63             var sort_len = tdOrderValArr.length - 1; 64             var isExchanged = false, compareRes; 65             for (var i = 0; i < sort_len; i++) { 66                 isExchanged = false; 67                 for (var j = sort_len; j > i; j--) { 68                     compareRes = options.Desc ? (tdOrderValArr[j] > tdOrderValArr[j - 1]) : (tdOrderValArr[j] < tdOrderValArr[j - 1]); 69                     if (compareRes) { 70                         ExchangeArray(tdOrderValArr, j); 71                         //交换行对象在数组中的顺序 72                         ExchangeArray(trJqObjArr, j); 73                         isExchanged = true; 74                     } 75                 } 76                 //一遍比较过后如果没有进行交换则退出循环  77                 if (!isExchanged) 78                     break; 79             } 80             _initConfig.IsLazyMode && (_trJqObjArray_Obj[tdIndex] = trJqObjArr); 81         } 82  83         if (trJqObjArr) { 84             if (options.Toggle) { 85                 _initConfig.IsLazyMode && isExist_trJqObjArr && trJqObjArr.reverse(); 86                 options.Desc = !options.Desc; 87             } 88             ShowTable(trJqObjArr); 89         } 90     } 91  92     /** 93     * 显示排序后的表格 94     * @private 95     * @param trJqObjArr：排序后的tr对象数组 96     **/ 97     function ShowTable(trJqObjArr) { 98         for (var n = 0, len = trJqObjArr.length; n < len; n++) { 99             _tbodyObj.append(trJqObjArr[n]);100             $.isFunction(_initConfig.OnShow) && (_initConfig.OnShow(n, trJqObjArr[n], _tbodyObj));101         }102     }103 104     /**105     * 交换数组中项的方法106     * @private107     * @param array：数组，j：交换数组项的尾项索引108     **/109     function ExchangeArray(array, j) {110         var temp = array[j];111         array[j] = array[j - 1];112         array[j - 1] = temp;113     }114 115     /**116     * 添加排序方式(规则)的方法117     * @private118     * @param tdVal：排序列的值，td_dataType：排序列的值类型119     **/120     function GetValue(tdVal, td_dataType) {121         switch (td_dataType) {122             case "int":123                 return parseInt(tdVal) || 0;124             case "float":125                 return parseFloat(tdVal) || 0;126             case "date":127                 return Date.parse(tdVal) || 0;128             case "string":129             default:130                 {131                     var tdVal = tdVal.toString() || "";132                     //如果值不为空，获得值是汉字的全拼133                     if (tdVal) {134                         tdVal = ZhCN_Pinyin.GetQP(tdVal);135                         tdVal = tdVal.toLowerCase();136                     }137                     return tdVal;138                 }139         }140     }141 142     /**143     * 添加排序方式(规则)项的方法144     * @private145     * @param obj：排序触发(标签)的对象或id，index：要排序列所在的列索引，options：排序规则设置对象(如:DataType...)146     **/147     function SetOrderItem(obj, index, options) {148         var orderSettings = {149             ValAttr: false, //排序列的取值属性,默认为：innerText150             DataType: "string", //排序列的值类型(可取值：int|float|date|string)151             OnClick: null, //(点击)排序时触发的方法152             Desc: true, //(是否是降序)排序方式，默认为：降序153             Toggle: true, //切换排序方式154             DefaultOrder: false //是否是默认的排序方式155         };156         $.extend(orderSettings, options);157         orderSettings.DataType = orderSettings.DataType.toLowerCase();158         obj = GetJqObj(obj);159         //绑定触发排序的事件160         obj.bind("click", function () {161             Sort(index, orderSettings);162             $.isFunction(orderSettings.OnClick) && orderSettings.OnClick();163         });164         orderSettings.DefaultOrder && Sort(index, orderSettings);165     }166     //#endregion167 168     //#region 对外公开169     var _api = {170         Init: function (obj, tBodyIndex, options) {171             /// 
初始化方法
172             /// 要排序table的id或对象173             /// 要排序的数据行所在的tbody标签的索引174             /// 初始化配置对象,{IsLazyMode:是否是懒惰模式,OnShow: 排序后表格显示时的方法}175             if (obj == null || typeof (obj) == undefined) {176                 alert("TableOrder初始化参数为空或有误！");177                 return;178             }179             if (typeof (ZhCN_Pinyin) == undefined) {180                 alert("获得汉字首拼的'ZhCN_Pinyin'对象不存在！");181                 return;182             }183             _tableObj = GetJqObj(obj);184             _tBodyIndex = tBodyIndex || 0;185             _tbodyObj = _tableObj.find("tbody:eq(" + _tBodyIndex + ")");186             options = options || {};187             _initConfig = {188                 IsLazyMode: true, //是否是懒惰模式，默认为:true189                 OnShow: null  //排序后表格显示时的方法,params:trIndex,trJqObj,tbodyObj190             };191             $.extend(_initConfig, options);192             _trJqObjArray_Obj = null;193         },194         SetOrder: function (obj, index, options) {195             /// 
设置排序规则的方法
196             /// 排序触发(标签)的对象或id197             /// 要排序列所在的列索引198             /// 排序规则设置对象(如:DataType...)199             if (_tableObj == null) {200                 alert("_tableObj尚未初始化！");201                 return;202             }203             SetOrderItem(obj, index, options);204         }205     };206     window.TableOrderOper = _api;207     //#endregion208 })();

其使用如下：

1  2  3      4     
      5      6     18     19     20     
     
      21     
       22     
        23     
24     
25     
26     
27     
28     
       29     
        30     
31     
32     
33     
34     
        35     
36     
37     
38     
39     
        40     
41     
42     
43     
44     
        45     
46     
47     
48     
49     
        50     
51     
52     
53     
54     
        55     
56     
57     
58     
59     
        60     
61     
62     
63     
64     
65     
      
       
        
 名称 / 类型
        
上传时间
        
大小
       
      
      
       
        
JSCSS
        
2008/9/12 8:51:09
        
433247
       
       
        
逗你玩
        
2008/3/6 20:12:23
        
11394
       
       
        
张迪
        
2008/10/4 20:21:54
        
351
       
       
        
Index
        
2008/10/4 20:24:11
        
14074
       
       
        
阿波罗
        
2008/10/4 20:24:11
        
2844
       
       
        
张涛
        
2012/10/4 20:21:54
        
1236
       
       
        
jSSon
        
2010/12/12 8:51:09
        
10101
       
      
     
66     67     68     69     81     82     

    代码中注释我都尽量写的比较清楚了，需要补充说明的是：

   1.js使用的是闭包，我强调代码要尽可能的简洁易懂。

   2.IsLazyMode属性设置，IsLazyMode=true,适用于当前要排序的表格是不变的，即不会有ajax的增删改行的操作，而且你看代码后就可以看出的一个好处：把要排序列的对应的行对象只一次遍历，并将排序后的行对象数组保存在全局对象中，下次排序时直接通过tdIndex(排序列的索引)取出对应的行对象数组,并将数组反转，即可实现排序的效果，可以在一定程度上提高代码执行效率(性能); IsLazyMode=false, 即适用于当前要排序的表格会改变，如有ajax的增删改行的操作的情况。

   3.考虑一般要排序的表格数据量都不大，其中的数组排序使用的是冒泡排序算法。

   4.OnShow: null  //排序后表格显示时的方法,params:trIndex,trJqObj,tbodyObj ——可方便用于设置排序后的表格的换行样式等，也出于对性能优化方面的考虑。

   好了，最后，附上插件js和demo，目前的实现只能说是能很好的满足我当前项目中的需求或适用于于大多数的场景，如果有没有考虑到或不好的地方，希望各位路过的朋友，能毫不客气的拍砖留言，大家互相交流学习！

   (2012-12-08最新版：修改了对汉字排序有误的问题，可以实现字母汉字混排(其实现是：将汉字转换为全拼，统一按字母排序))