使用javascript在html表中按日期时间和字母顺序排序_Javascript_Jquery_Html

使用javascript在html表中按日期时间和字母顺序排序

javascript jquery html

使用javascript在html表中按日期时间和字母顺序排序,javascript,jquery,html,Javascript,Jquery,Html,您好，我是网页开发人员的新手，我需要在点击表格标题时按日期和字母对我的表格进行排序这是我的桌子。。。。表中的数据是使用ajax动态生成的我的需要是单击日期标题时，它应根据日期进行排序单击通知标题时，它应根据字母表进行排序请对此给出一些想法或建议……我将使用一个小型jquery插件我已经试过了，但觉得它太大了，我需要它，它比你的大一点，所以我建议哪一个最适合你您可以在他们的网站上找到演示。将相应的值存储在数组中并进行排序要按日期对数组排序，请使用以下命令 array.sort

您好，我是网页开发人员的新手，我需要在点击表格标题时按日期和字母对我的表格进行排序

这是我的桌子。。。。表中的数据是使用ajax动态生成的

我的需要是

单击日期标题时，它应根据日期进行排序
单击通知标题时，它应根据字母表进行排序

请对此给出一些想法或建议……

我将使用一个小型jquery插件

我已经试过了，但觉得它太大了，我需要它，它比你的大一点，所以我建议哪一个最适合你

您可以在他们的网站上找到演示。

将相应的值存储在数组中并进行排序

要按日期对数组排序，请使用以下命令

array.sort(function(a,b){
var c = new Date(a.date);
var d = new Date(b.date);
return c-d;
});

要按字母表对数组排序，请使用基本函数

用于对日期和时间进行排序

函数排序C（a，b）{
function sortAsc(a, b) {
    var aSort = a.Text.toLowerCase(), //Text is the field on which we make sort
        bSort = b.Text.toLowerCase();
    if (aSort === bSort) return 0;
    return aSort < bSort ? 1 : -1;
}
function sortDesc(a, b) {
    var aSort = a.Text.toLowerCase(), //Text is the field on which we make sort
        bSort = b.Text.toLowerCase();
    if (aSort === bSort) return 0;
    return aSort > bSort ? 1 : -1;
}

var aSort=a.Text.toLowerCase（），//Text是我们进行排序的字段
bSort=b.Text.toLowerCase（）；
if（aSort==bSort）返回0；
返回aSortbSort？1:-1；
}

我使用这两种方法对Json Obejct进行排序

将它们称为

[jsonObject].sort（sortDesc）或[jsonObject].sort（sortAsc）

您可以以递增的方式为日期列指定id，即第1行col1将是date\u 1，然后第2行和col1将是date\u 2，就像这样，将其应用于这两列（notify\u 1，notify\u 2，…）。表单上有一个隐藏字段，该字段由行数组成。在此基础上，您可以对其应用循环，然后可以在td的内部html上使用任何排序算法。

我使用jQuery库制作了一个示例，并将其添加到

jQuery选择器返回的是数组对象，它具有本机数组

sort

函数

$('table tbody tr').sort( function( a , b ) {

     // do compare here
});

希望这会有帮助

将以下代码复制并粘贴到文件中。。将其重命名为

test.html

<html>
    <head>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th data-key="id" data-column="0" data-order="asc">id</th>
                    <th data-key="date" data-column="1" data-order="asc">date</th>
                    <th data-key="notify" data-column="2" data-order="asc">notify</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>31-03-2013 06:12:57 PM</td>
                    <td>gold</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>31-03-2013 06:14:57 PM</td>
                    <td>diamond</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>31-03-2013 06:10:57 PM</td>
                    <td>silver</td>
                </tr>
            </tbody>
        </table>    
        <script type="text/javascript">

            function getDate( str ) {

                var ar =  /(\d{2})-(\d{2})-(\d{4}) (\d{2}):(\d{2}):(\d{2}) ([AM|PM]+)/ 
                     .exec( str ) 

                return new Date(
                    (+ar[3]),
                    (+ar[2])-1, // Careful, month starts at 0!
                    (+ar[1]),
                    (+ar[4])+ ( ar[7]=='PM'? 12 :0 ),
                    (+ar[5]),
                    (+ar[6])
                );
            };

            $( function(){


                var sorter = {

                    order   : [1,-1],
                    column  : 0 ,
                    key     :'id' ,

                    setOrder : function( k ){

                        this.order  = ({ 
                            asc :[1,-1], desc:[-1,1] 
                        })[k] || this.order ;

                        return this;
                    },
                    setColumn : function( c ){

                        this.column  = c || this.column ;
                        return this;
                    },

                    setKey : function( k ) {
                        this.key  = k || this.key;
                        return this;
                    },

                    sort : function( els ) {

                        var sortFunc = this.key;

                        return els.sort( this[ sortFunc ]);        
                    },

                    getValue : function( a, b ){

                        return {
                            a : $(a).find('td:eq('+ sorter.column +')').text(),
                            b : $(b).find('td:eq('+ sorter.column+')').text()
                        }
                    },
                    comp : function( val ) {

                            if ( val.a == val.b ) {
                                return 0;
                            }

                            return  val.a > val.b ? 
                                    sorter.order[0]:sorter.order[1] ; 

                    },
                    id : function( a , b ){

                            var val = sorter.getValue(a,b);

                            val.a = parseInt( val.a , 10 );
                            val.b = parseInt( val.b , 10 );

                            return sorter.comp( val );        

                    },

                    notify : function( a , b ){

                            var val = sorter.getValue(a,b);
                            return sorter.comp( val );           

                    },
                    date : function( a , b ){

                            var val = sorter.getValue(a,b);

                            val.a = getDate( val.a );
                            val.b = getDate( val.b );

                            return sorter.comp( val ); 

                    }
                }

                $('table thead').on('click', 'th', function(){

                        var sorted = sorter.setOrder( $(this).attr('data-order') )
                                           .setColumn( $(this).attr('data-column') )
                                           .setKey( $(this).attr('data-key') )
                                           .sort(  $('table tbody tr') );


                        $('table tbody').empty().append( sorted );  

                        $('table thead th').not( this )
                                           .attr('data-order' ,'asc');

                        $(this).attr(
                            'data-order',  
                            ( $(this).attr('data-order') == 'asc' ? 'desc' :'asc') 
                        );

                });
            });
        </script>

    </body>
</html>


身份证件
日期
通知
1.
31-03-2013 06:12:57下午
金
2.
31-03-2013 06:14:57下午
钻石
3.
31-03-2013 06:10:57下午
银
函数getDate（str）{
var ar=/（\d{2}）-（d{2}）-（d{4}）（\d{2}）：（\d{2}）：（\d{2}）（[AM}PM]+）/
.exec（str）
返回新日期(
（+ar[3]），
（+ar[2]）-1，//小心，月从0开始！
（+ar[1]），
（+ar[4]）+（ar[7]=“PM”？12:0），
（+ar[5]），
（+ar[6]）
);
};
$（函数（）{
var分拣机={
订单：[1，-1]，
列：0，
键：'id'，
设置顺序：函数（k）{
this.order=（{
asc:[1，-1]，说明：[-1,1]
})[k] | |这个订单；
归还这个；
},
设置列：函数（c）{
this.column=c | | this.column；
归还这个；
},
设置键：功能（k）{
this.key=k | | this.key；
归还这个；
},
排序：函数（els）{
var sortFunc=this.key；
返回els.sort（此[sortFunc]）；
},
getValue:函数（a，b）{
返回{
a:$（a）.find（'td:eq（'+sorter.column+'）））.text（），
b:$（b）.find（'td:eq（'+sorter.column+'）））.text（）
}
},
组件：功能（val）{
如果（val.a==val.b）{
返回0；
}
返回值a>值b？
分拣机订单[0]：分拣机订单[1]；
},
id：功能（a，b）{
var val=分拣机的getValue（a，b）；
val.a=parseInt（val.a，10）；
val.b=parseInt（val.b，10）；
返回分拣机组件（val）；
},
通知：功能（a、b）{
var val=分拣机的getValue（a，b）；
返回分拣机组件（val）；
},
日期：职能部门（a、b）{
var val=分拣机的getValue（a，b）；
val.a=获取日期（val.a）；
val.b=获取日期（val.b）；
返回分拣机组件（val）；
}
}
$（'table thead'）。在（'click'，'th'，function（）上{
var sorted=sorter.setOrder（$（this.attr（'data-order'））
.setColumn（$（this）.attr（'data-column'））
.setKey（$（this）.attr（'data-key'））
.sort（$（'table tbody tr'）；
$（'table tbody'）.em