一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > js教程

推荐专题

最新下载

热门教程

得用jquery对table的tr重新排序

时间：2015-03-22 编辑：简简单单 来源：一聚教程网

借助于强大的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 示例如下：

 代码如下 复制代码

 
   
     
     
     
   
 
 
   
     
     
     
   
   
     
     
     
   
 
 
   
     
     
 
IDUsernameRevenue
1032Zhang$ 127,579.00
1074gm1$ 37,331.00
Summary$ 164,910.00
   

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2024 www.111COM.NET AII Right Reserved 苏ICP备17065847号-2

网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理