こんにちは、私は Web ページ開発者の初心者です。テーブル ヘッダーをクリックして、テーブルを日付順およびアルファベット順でソートする必要があります。
これは私のテーブルです....テーブル内のデータはajaxを使用して動的に生成されます....
私の必要性は
- 日付ヘッダーをクリックすると、日付に従ってソートする必要があります
- 通知ヘッダーをクリックすると、アルファベット順にソートする必要があります
これについていくつかのアイデアや提案をしてください.......
11817 次
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
小さな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 に答える