使用javascript在html表中的日期時間和字母順序排序

Question

嗨，我是網頁開發人員的新手，我需要在點擊表格標題時按日期和字母順序對表格進行排序

在此輸入圖像描述

這是我的表....表中的數據是使用ajax動態生成的....

我的需要是

點擊日期標題，它應根據日期排序
點擊通知標題，它應按字母順序排序

請對此提出一些想法或建議.......

Answer 1

我使用jQuery庫做了示例，並在http://jsfiddle.net/bURg4/2/中添加了它

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>

Answer 2

我會使用一個小的jquery插件。

我已經嘗試了http://www.datatables.net/，但認為它太大了，因為我的需求比你的大一點，所以我建議http://tablesorter.com/docs/哪個適合你完成。

你會在他們的網站上找到演示。

Answer 3

將相應的值存儲在數組中並進行排序

要按日期排序數組，請使用此選項

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

要按字母順序排序數組，請使用基本的sort（）函數

現場演示用於對日期和時間進行排序

Answer 4

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;
}

我使用這兩種方法來排序Json Obejct

將它們稱為[jsonObject].sort(sortDesc) or [jsonObject].sort(sortAsc)

Answer 5

您可以以遞增的方式為日期列提供id，即第1行col1將為date_1，然后row2和col1將為date_2，將其應用於兩個列（notify_1，notify_2，...）。 在包含no行的表單上有一個隱藏字段。 在它的基礎上你可以應用一個循環，然后可以使用任何排序算法在td的內部HTML。

使用javascript在html表中的日期時間和字母順序排序

問題描述

5 個解決方案

解決方案1
4 2013-03-25 09:47:55

解決方案2
2 2013-03-25 06:39:02

解決方案3
2 2013-03-25 06:41:38

解決方案4
1 2013-03-25 06:46:18

解決方案5
0 2013-03-25 06:46:33

使用javascript在html表中的日期時間和字母順序排序

問題描述

5 個解決方案

解決方案1 4 2013-03-25 09:47:55

解決方案2 2 2013-03-25 06:39:02

解決方案3 2 2013-03-25 06:41:38

解決方案4 1 2013-03-25 06:46:18

解決方案5 0 2013-03-25 06:46:33

解決方案1
4 2013-03-25 09:47:55

解決方案2
2 2013-03-25 06:39:02

解決方案3
2 2013-03-25 06:41:38

解決方案4
1 2013-03-25 06:46:18

解決方案5
0 2013-03-25 06:46:33