简介

tableSort是一款JQuery表格排序插件，是专门针对表格<table>中的各列<td>以动画效果进行排序，排序形式包括正则匹配、按字母排序、ASCII或数值，无论选择哪种排序形式，在表格中，都以动画的形式展示排序过程，效果非常好。（附件中下载的文件带DEMO）

参数说明：

onCol:0, //表示排序列的索引号，该值初始值为0
keepRelationships:true, //表示在选中列排序时，除该列之外的其余列的顺序是否要随之改变
sortDesc:true, //表示排序的方式，如果为true,表示按降序排列，否则按升序排列
“regexp”:null, //用于排序的正则表达式，其中用于排序部分由”regexpIndex”属性决定，默认值为null
“regexpIndex”:0, //决定用于排序正则表达式的索引号，默认值为0
“child”:’#id’, //用于排序的子元素内容，即按子元素中的<td>内容排序，而不是父元素中的<td>内容
“sortType”:numeric, //排序时的类型，如”numeric”表示按照数字类型排序，默认按”ascii”类型排序

使用

1.  引入 jquery.js 和 jquery.tableSort.js 文件

2.  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>

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
}

3.  调用

<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>

相关链接

在线演示 ：https://www.jq22.com/yanshi7356

GitHub 地址 ：https://github.com/kylefox/jquery-tablesort