Web前端开发学习之路——表格排序插件（tablesorter）

表格是呈现数据不可缺少的工具，通过tablesorter插件能够轻松地美化表格的排序只要设置一些参数就可以简单完成，让表格能够灵活呈现。

下载与套用

Tablesorted的下载地址为：http://plugins.jquery.com/tablesorter/

打开网址之后，点击右侧DOWNLOAD NOW

下载后将文件解压，解压后的文件夹种会包含多个文件夹和tablesorter的js文件，其中docs文件夹是说明文件，themes文件夹种有blue和green两种主题样式，通常只需使用jquery.tablesorter.js和themes文件夹，可以将它们复制到html文件的相同路径下，接下来我们看看如何套用tablesorter plungin。

Tablesorter是JQuery的plugin,因此仍然要加载jQuery library，再加载tablesorter plugin，表格的颜色可以套用themes文件夹种提供的主题样式。下面语法使用了blue的主题样式，只要将下列语法添加到标记之间即可。

如果.js文件、.css文件与html文件位于不同文件夹，必须指定路径。

使用方式非常简单，首先制作一个基本的表格，tablesorter必须套用在标准的HTML表格中，表格必须有表头标记和表身标记，并且指定table的Id名称和class名称，id名称可自定义，class必须指定为tablesorter，如下所示：

    

    

        
学号
        
姓名
        
数学
        
英语
        
语文
    
    
    

    

        
A001
        
玩大锤
        
100
        
100
        
100
    
    

        
A002
        
玩清华
        
85
        
95
        
99
    
    

        
A003
        
上北大
        
87
        
98
        
99
    
    

        
A004
        
上复旦
        
88
        
96
        
100
    
    

接着，只要在网页加载完成时，告诉tablesorter将哪一个表格排序就可以了。语法如下：

 $(function () {
            $("$myTable").tablesorter();
        })

可以看到表头右方多了一个排序按钮，只要单击它就可以对表格进行排序，非常方便。

高级应用

默认排序只要设置sortList参数即可，格式如下：

sortList:[[columnIndex,sortDirection],...]

columnIndex指定要排序的字段，作点起算第一列为0，从左到右；sortDirection是排序方式，0是升序排列（从小到大），1是降序排列（从大到小）。例如，要将第一列从大到小排序，第二列由小到大排序，如下

$("#sortList").tablesorter({sortList:[[0,1],[1,0]]});

当然，还可以设置某一列不允许排序，只要在headers参数中指定字段不排序就可以了，语法如下：

headers:{0:{sorter:false},1:{sorter:false}}

奇偶分色

为了让表格更容易阅读，会在奇数行和偶数行分别用不同的颜色进行分隔，语法如下：

$("#sortList").tablesorter({widget:['zebra']});

效果如下：

完整范例如下：

    
    
    
    
    
    





 

    

        
学号
        
姓名
        
数学
        
英语
        
语文
    
    
    

    

        
A001
        
玩大锤
        
100
        
100
        
100
    
    

        
A002
        
玩清华
        
85
        
95
        
99
    
    

        
A003
        
上北大
        
87
        
98
        
99
    
    

        
A004
        
上复旦
        
88
        
96
        
100
    
    

执行结果如下：