jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

" alt="jQuery in Action, Second Edition" /></td>
<td>jQuery in Action, Second Edition</td>
<td>Bear Bibeault / Yehuda Katz
</td>
<td> Apr 2010</td>
<td>$35.02</td>
</tr>
</tbody>
</table>
</body>
</html>

第一步：为表格添加奇偶行交替背景
 
复制代码 代码如下:
<style type="text/css">
.even{
background-color: #E8A824;
}
.odd{
background-color:#74411B;
}
</style>

第二步：按字母排序
实现基于表格的Title列进行排序
<thclass="sort-alpha">Title</th>
为Title定义了一个sort-alpha类
复制代码 代码如下:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var alternateRowColors = function($table){
$(''tbody tr:odd'',$table).removeClass(''even'').addClass(''odd'');
$(''tbody tr:even'',$table).removeClass(''odd'').addClass(''even'')
};
$(''table.sorttable'').each(function (){
var $table =$(this);
alternateRowColors($table);
$(''th'',$table).each(function(column){
var $header = $(this);
if($header.is(''.sort-alpha'')){
$header.addClass(''clickable'').hover(function(){
$header.addClass(''hover'');
},function(){
$header.removeClass(''hover'');
}).click(function(){
var rows = $table.find(''tbody>tr'').get();
rows.sort(function(a,b){
var keyA =$(a).children(''td'').eq(column).text().toUpperCase();
var keyB =$(b).children(''td'').eq(column).text().toUpperCase();
if(keyA<keyB) return -1;
if(keyA>keyB) return 1;
return 0;
});
$.each(rows,function(index,row){
$table.children(''tbody'').append(row);
});
alternateRowColors($table);
});
}
});
});
});
</script>

最后
当你点击Title时
最终效果：
 
其他类型的排序如下：