您好，我是网页开发人员的新手，我需要在单击表格标题时按日期和字母顺序对我的表格进行排序
这是我的表....表内的数据是使用ajax动态生成的....
我的需求是
- 点击日期标题，它应该根据日期排序
- 在点击通知标题时，它应该根据字母排序
请就此提出一些想法或建议......
最佳答案
我使用 jQuery 库制作了示例，并将其添加到 http://jsfiddle.net/bURg4/2/ 中
jQuery 选择器返回的是数组对象，具有原生数组排序功能。
$('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>
关于javascript - 使用javascript在html表中按日期时间和字母顺序排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15609012/