一、插件介绍
该插件是专门针对表格<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 }