嗨，我是网页开发人员的新手，我需要在单击表格标题时按日期和字母对表格进行排序
这是我的表....表中的数据是使用 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;
}
我使用这两种方法对 Json Obejct 进行排序
称他们为 [jsonObject].sort(sortDesc) or [jsonObject].sort(sortAsc)
于 2013-03-25T06:46:18.757 回答
0
您可以以递增方式为日期列提供 id，即第 1 行 col1 将是 date_1，然后 row2 和 col1 将是 date_2，就像这样，将其应用于两列（notify_1，notify_2，...）。在表单上有一个隐藏字段，包含行数。在此基础上，您可以对其应用一个循环，然后可以在 td 的内部 html 上使用任何排序算法。
于 2013-03-25T06:46:33.680 回答