网络进行时

借助于强大的jquery库，通过一些简单的js代码来实现对table数据列进行排序。排序是通过调整table的tr的顺序重新显示，全部在客户端上完成，不需要和服务器交互，因此减轻了服务器的压力。查看Demo请猛点这里。

实现排序的js代码如下：

function tableSort(jqTableObj) {
    jqTableObj.find('thead th').click(
        function(){
            var dataType = $(this).attr('dataType') || 'text';
            var index = jqTableObj.find('thead th').index(this) + 1;
            var arr = [];
            var row = jqTableObj.find('tbody tr');

            $.each(row, function(i){arr[i] = row[i]});

            if($(this).hasClass('current')){
                arr.reverse();
            } else {
                arr.sort(Utils.sortStr(index, dataType))

                jqTableObj.find('thead th').removeClass('current');
                $(this).addClass('current');
            }

            var fragment = document.createDocumentFragment();

            $.each(arr, function(i){
                fragment.appendChild(arr[i]);
            });

            jqTableObj.find('tbody').append(fragment);
        }
    );    

    var Utils = (function() {
        function sortStr(index, dataType){
            return function(a, b){
                var aText=$(a).find('td:nth-child(' + index + ')').attr('_order') || $(a).find('td:nth-child(' + index + ')').text();
                var bText=$(b).find('td:nth-child(' + index + ')').attr('_order') || $(b).find('td:nth-child(' + index + ')').text();

                if(dataType != 'text'){
                    aText=parseNonText(aText, dataType);
                    bText=parseNonText(bText, dataType);

                    return aText > bText ? -1 : bText > aText ? 1 : 0;
                } else {
                    return aText.localeCompare(bText)
                }
            }
        }

        function parseNonText(data, dataType){
            switch(dataType){
                case 'int':
                    return parseInt(data) || 0
                case 'float':
                    return parseFloat(data) || 0
                default :
                return filterStr(data)
            }
        }

        //过滤中文字符和$
        function filterStr(data){
            if (!data) {
                return 0;
            }

            return parseFloat(data.replace(/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/,'$1'));
        }

        return {'sortStr' : sortStr};
    })();
}

要想让上面的代码工作，需要在原有的table中注意几点。
1、表头的tr其父元素为thead，另外表头列使用th，同时要使用dataType属性名来标示数据的类型，类型可以为text(默认)，int和float；
2、显示table数据的tr父元素为tbody，显示数据的列用td，可以使用_order属性指定该字段的真实值。

table 示例如下：

<table>
  <thead>
    <tr>
      <th datatype="int">ID</th>
      <th datatype="text">Username</th>
      <th datatype="float" class="current">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1032</td>
      <td>Zhang</td>
      <td _order="127579">$ 127,579.00</td>
    </tr>
    <tr>
      <td>1074</td>
      <td>gm1</td>
      <td _order="37331">$ 37,331.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Summary</th>
      <th>$ 164,910.00
    </tr>
  </tfoot>
</table>