一、插件介绍
该插件是专门针对表格<table>中的各列<td>以动画效果进行排序，排序形式包括正则匹配、按字母排序、ASCII或数值，无论选择哪种排序形式，在表格中，都以动画的形式展示排序过程，效果非常好。
二、插件作者及介绍
作者：Andy Croxall
作者介绍：乔恩拉希，是美国俄勒冈波特兰的一个前端WEB开发工程师。专注于网站开发、用户 体验，拉长前端WEB开发先进的CSS3和HTML5技术，关注UI网页设计、jQuery/JavaScript/Ajax动画、移动开发，包括HTML5网页应用程序，用于手机和AMP反应布局、本地设备的应用程序。
作者官网 http://mitya.co.uk/
开发文档 http://mitya.co.uk/scripts/Animated-table-sort-REGEXP-friendly-111
本站JS下载 http://www.ijquery.cn/js/jquery.tableSort.js
三、使用方法
$(表格元素).sortTable([options]);
四、插件参数
onCol:0, //表示排序列的索引号，该值初始值为0 keepRelationships:true, //表示在选中列排序时，除该列之外的其余列的顺序是否要随之改变 sortDesc:true, //表示排序的方式，如果为true,表示按降序排列，否则按升序排列 “regexp”:null, //用于排序的正则表达式，其中用于排序部分由”regexpIndex”属性决定，默认值为null “regexpIndex”:0, //决定用于排序正则表达式的索引号，默认值为0 “child”:’#id’, //用于排序的子元素内容，即按子元素中的<td>内容排序，而不是父元素中的<td>内容 “sortType”:numeric, //排序时的类型，如”numeric”表示按照数字类型排序，默认按”ascii”类型排序
五、使用教程
1、HTML代码
<div id="tip">默认无排列规则</div> <table id="tbStudent" class="table"> <tr> <th><a href="javascript:">编号</a></th><th><a href="javascript:">姓名</a></th> <th><a href="javascript:">性别</a></th><th><a href="javascript:">总分</a></th> </tr> <tr><td>1031</td><td>李渊</td><td>男</td><td>654</td></tr> <tr><td>1021</td><td>张扬</td><td>男</td><td>624</td></tr> <tr><td>1011</td><td>吴敏</td><td>女</td><td>632</td></tr> <tr><td>1026</td><td>李小明</td><td>男</td><td>610</td></tr> <tr><td>1016</td><td>周谨</td><td>女</td><td>690</td></tr> <tr><td>1041</td><td>谢小敏</td><td>女</td><td>632</td></tr> <tr><td>1072</td><td>刘明明</td><td>男</td><td>633</td></tr> <tr><td>1063</td><td>蒋忠公</td><td>男</td><td>675</td></tr> </table>
2、JS代码
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.tableSort.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $tb = $("#tbStudent");
var $tip = $("#tip");
var $bln = true;
var $str = "降";
//遍历table标题中的a元素
$(".table tr th a").each(function(i) {
$(this).bind("click", function() {
$bln = $bln ? false : true;
$str = $bln ? "降" : "升";
$tip.show().html("当前按 <b>" +
$(this).html() + $str + "序</b> 排列");
$tb.sortTable({
onCol: i + 1,
keepRelationships: true,
sortDesc: $bln
});
});
});
});
</script>
3、CSS代码
#tip
{
border:solid 1px #ccc;
width:358px;
margin:0 auto;
height:21px;
padding:2px 10px;
background-color:#eee;
font-size:12px;
text-align:center;
margin-bottom:10px;
}
.table
{
width:380px;
margin:0 auto;
border-collapse: collapse;
text-align:center;
}
.table tr td, .table tr th
{
background: #fff;
border: solid 1px #666;
color: #666;
height:30px;
line-height:30px;
}
.table tr th
{
background: #ccc;
color: #666;
text-align: center;
font-size:14px;
}
.table a,.table a:visited
{
color:#666;
text-decoration:none
}
.table a:hover,.table a:active
{
color:#fff;
text-decoration:none
}