js实现对table数据列排序

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

实现排序的js代码如下：

//点击表格的列进行排序

function tableSort(jqTableObj) {
    jqTableObj.find('tr 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)
                }
            }


        }

要想让上面的代码工作，需要在原有的table中注意几点。

1、表头的tr其父元素为thead，另外表头列使用th，同时要使用dataType属性名来标示数据的类型，类型可以为text(默认)，int和float；

2、显示table数据的tr父元素为tbody，显示数据的列用td，可以使用_order属性指定该字段的真实值。

table 示例如下：

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

案例网站