jquery 排序插件 tablesorter

        分页的插件有很多，项目里面用的是jquery，所以就采用了jquery的方法来做，它都封装好了，不用自己在去写算法。

 

参考项目主页：http://tablesorter.com/docs/。

 

 

 

tablesorter

 

插件

 

  Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。

 

主要的特点包括：

• 多列排序
• 支持文本、URL地址、数值、IP地址、日期类型，以及自定义类型排序
• 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性
• 支持第二个隐藏域排序
• 可扩展外观
• 程序简小，打包后只有 7.4K

例子

1

First Name	Last Name	Age	Total	Discount	Difference	Date
Bruce	Almighty	45	$153.19	44.7%	+77	Jan 18, 2001 9:12 AM
Bruce	Evans	22	$13.19	11%	-100.9	Jan 18, 2007 9:12 AM
Clark	Kent	18	$15.89	44%	-26	Jan 12, 2003 11:14 AM
John	Hood	33	$19.99	25%	+12	Dec 10, 2002 5:14 AM
Peter	Parker	28	$9.99	20.9%	+12.1	Jul 6, 2006 8:14 AM

2

 

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

 

3

<table id="myTable"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 

 

 

4

 

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 

 

5

$(document).ready(function()

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