jquery插件tablesorter

在行业系统的开发中，数据的排序是免不了的，在c/s开发中，数据的排序比较简单，而在b/s的开发中，通常排序是靠与服务端交互来完成，每一次排序都需要提起一次数据。这样很麻烦，而且对数据库的压力也很大。

现在我们使用jquery插件tablesorter来完成静态排序，大大减轻了数据库的压力。

它的使用方法很简单。

Html 代码

1. <script  type= "text/javascript"  src= "js/jquery.js" > </script >
2. <script  type= "text/javascript"  src= "js/tablesorter.js" > </script >
3. <script  type= "text/javascript" >
4. $(function(){
5.     $("#sortTable").tablesorter();
6. });
7. </script >

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tablesorter.js"></script>
<script type="text/javascript">
$(function(){
	$("#sortTable").tablesorter();
});
</script>

其中“sortTable“是你的表格的ID。就这么一句话就可以。

需要注意的是，字段名称是需要用<thead><tr><th>来指明才可以完成排序。

Html 代码

1. <table  width= "600"  border= "1"  align= "center"  cellpadding= "0"  cellspacing= "0"  id= "sortTable" >
2. <thead >
3.    <tr >
4.      <th >序号 </th >
5.      <th >地址 </th >
6.      <th >姓名 </th >
7.      <th >年龄 </th >
8.      <th >日期 </th >
9.    </tr >
10. </thead >
11.    <tr >
12.      <td  width= "53" >1 </td >
13.      <td  width= "181" >山西省长治市 </td >
14.      <td  width= "117" >赵磊 </td >
15.      <td  width= "117" >24 </td >
16.      <td  width= "120" >2006.10.10 </td >
17.    </tr >
18.    <tr >
19.      <td >2 </td >
20.      <td >山西省太原市 </td >
21.      <td >李清 </td >
22.      <td >30 </td >
23.      <td >2008.12.30 </td >
24.    </tr >
25.    <tr >
26.      <td >3 </td >
27.      <td >河南省郑州市 </td >
28.      <td >常建坤 </td >
29.      <td >51 </td >
30.      <td >2002.08.30 </td >
31.    </tr >
32.    <tr >
33.      <td >4 </td >
34.      <td >山东省济南市 </td >
35.      <td >张耀 </td >
36.      <td >20 </td >
37.      <td >2001.01.05 </td >
38.    </tr >
39.    <tr >
40.      <td >5 </td >
41.      <td >四川省成都市 </td >
42.      <td >唐骏 </td >
43.      <td >15 </td >
44.      <td >2005.07.08 </td >
45.    </tr >
46.    <tr >
47.      <td >6 </td >
48.      <td >广东省广州市 </td >
49.      <td >安意如  </td >
50.      <td >36 </td >
51.      <td >2006.04.30 </td >
52.    </tr >
53.    <tr >
54.      <td >7 </td >
55.      <td >湖南省长沙市 </td >
56.      <td >何马 </td >
57.      <td >28 </td >
58.      <td >2007.12.12 </td >
59.    </tr >
60.    <tr >
61.      <td >8 </td >
62.      <td >湖北省武汉市 </td >
63.      <td >苏小白 </td >
64.      <td >41 </td >
65.      <td >2009.05.06 </td >
66.    </tr >
67.    <tr >
68.      <td >9 </td >
69.      <td >江苏省杭州市 </td >
70.      <td >饶尚宽 </td >
71.      <td >22 </td >
72.      <td >2010.12.10 </td >
73.    </tr >
74.    <tr >
75.      <td >10 </td >
76.      <td >陕西省西安市 </td >
77.      <td >石晓娜 </td >
78.      <td >15 </td >
79.      <td >2003.03.05 </td >
80.    </tr >
81. </table >

更多资源：

http://tablesorter.com/docs/