jquery插件tablesorter自动排序

4 篇文章 0 订阅

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

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

它的使用方法很简单。

Html 代码
<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 >
< 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 代码
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" id="sortTable">
<thead>
  <tr>
    <th>序号</th>
    <th>地址</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>日期</th>
  </tr>
</thead>
  <tr>
    <td width="53">1</td>
    <td width="181">山西省长治市</td>
    <td width="117">赵磊</td>
    <td width="117">24</td>
    <td width="120">2006.10.10</td>
  </tr>
  <tr>
    <td>2</td>
    <td>山西省太原市</td>
    <td>李清</td>
    <td>30</td>
    <td>2008.12.30</td>
  </tr>
  <tr>
    <td>3</td>
    <td>河南省郑州市</td>
    <td>常建坤</td>
    <td>51</td>
    <td>2002.08.30</td>
  </tr>
  <tr>
    <td>4</td>
    <td>山东省济南市</td>
    <td>张耀</td>
    <td>20</td>
    <td>2001.01.05</td>
  </tr>
  <tr>
    <td>5</td>
    <td>四川省成都市</td>
    <td>唐骏</td>
    <td>15</td>
    <td>2005.07.08</td>
  </tr>
</table>

更多资源:

http://tablesorter.com/docs/

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值