动画表格排序插件（如何调用jQuery插件学习第九天）

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"类型排序
})

动画表格排序插件（如何调用jQuery插件学习第九天）

TableSort插件的使用：

猜你喜欢