2

こんにちは、私は Web ページ開発者の初心者です。テーブル ヘッダーをクリックして、テーブルを日付順およびアルファベット順でソートする必要があります。

ここに画像の説明を入力

これは私のテーブルです....テーブル内のデータはajaxを使用して動的に生成されます....

私の必要性は

  • 日付ヘッダーをクリックすると、日付に従ってソートする必要があります
  • 通知ヘッダーをクリックすると、アルファベット順にソートする必要があります

これについていくつかのアイデアや提案をしてください.......

4

5 に答える 5

4

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>   
于 2013-03-25T09:47:55.397 に答える
2

対応する値を配列に格納し、並べ替えを行います

配列を日付でソートするには、これを使用します

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

配列をアルファベットでソートするには、基本的なsort()関数を使用します

日付と時刻をソートするためのライブデモ

于 2013-03-25T06:41:38.870 に答える
2

小さなjqueryプラグインを使用します。

http://www.datatables.net/を試してみましたが、私のニーズには大きすぎると思います。それはあなたのものよりも少し大きいので、あなたの仕様にぴったり合うhttp://tablesorter.com/docs/をお勧めします。

彼らのサイトでデモを見つけることができます。

于 2013-03-25T06:39:02.080 に答える
1
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;
}

これらの 2 つの方法を使用して、Json Obejct を並べ替えます

それらを次のように呼びます [jsonObject].sort(sortDesc) or [jsonObject].sort(sortAsc)

于 2013-03-25T06:46:18.757 に答える
0

日付列のIDを増加させる方法で指定できます.Row 1 col1がdate_1になり、次にrow2とcol1がdate_2になり、両方の列に適用されます(notify_1、notify_2、...)。行数で構成されるフォームに隠しフィールドがあります。それに基づいてループを適用し、td の内部 html で任意の並べ替えアルゴリズムを使用できます。

于 2013-03-25T06:46:33.680 に答える