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>

其中“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/

原文地址:https://www.cnblogs.com/luluping/p/1567369.html