TableSort插件是专门针对表格<table1>中的各列表<td>以动画效果进行排序,排序形式包括正则匹配,按字母升降,ASCII或数值,无论选择哪种排序形式,在表格中,都以动画的形式展示排序切换的过程。
TableSort插件的使用:
(1)插件文件:
Js-8-9/jquery.tableSort.js
(2)下载地址:
http://www.mitya.co.uk/script/Animated-table-sort-REGEXP-friendly-111
(3)功能描述:
在页面中创建一个<table>表格,第一行为列表标题,分别对"学号","姓名","性别","总分"等5个列标题名。用户分别单击这5个列标题名时,对应该列的数据将以动画的效果进行排序,在排序时,如果已经时降序,单击后将按照升序排列;如果已经是升序,单击后将按照降序排序,同时,在表格的上方显示当前排序的列标题名称和排序方式。
(4)实现代码:
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Js-8-9/jquery.tableSort.js"></script>
<link href="Css-8-9/8-9.css" rel="stylesheet" type="text/css">
<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>
<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>
(5)代码分析:
在这个例子中,先在<head>元素中导入插件对应的JS文件,并在页面中添加<table>表格元素,接下来编写JavaScript代码,实现用户单击列标题内容时以动画效果实现排序的功能,代码如下:
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
});
});
});
在上述代码中,前4行定义变量保存页面中的元素和初始化显示值及排序方式变量。接下来,通过遍历<table>表格元素标题中所有<a>元素的方式,设置单击列标题的click事件。在该事件中,先改变变量$bln的值,如果该值为true,则改为false,否则取当前值的反馈。然后,根据该值获取$str的内容,并将该内容显示在页面指定的ID号元素中。
最后,通过页面中的<table>表格元素调用插件sortTable()方法,实现表格中对应列表数据的排序功能。在该方法中,"onCol"属性表示排序列的索引号,该值初始值为0。"keepRelationships"属性表示在选中列表时,除该列表之外的其余列的顺序是否要也随之改变;"sortDesc"属性表示排序的方式,如果为true,表示按降序排列,否则按升序排列。
在插件的sortTable([options])方法中,可选项参数options除在示例中使用到各属性之外,还有如下常用属性:
$(表格元素).sortTable({
"regsxp": //用于排序的正则表达式,其中用于排序部分由"regexpIndex"属性决定,默认值为null
"regexpIndex": //决定用于排序正则表达式的索引号,默认值为0
"child": //用于排序列的子元素内容,即按子元素中<td>内容排序,而不是父元素中的<td>内容
"sortType": //排序时的类型,"numeric"表示按照数字类型排序,默认按"ascii"类型排序
})