最新消息:

第85款插件:jquery.tableSort.js制作动画表格排序插件

表单插件 杨红伟 2862浏览 0评论

一、插件介绍

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

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址