这篇文章主要介绍了jQuery表格排序组件-tablesorter的使用,需要的朋友可以参考下
一、引入文件
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<!-- 引入以下样式则表头出现排序图标,同时引入图片 -->
<link href="css/style.css" rel="stylesheet" type="text/css" >

效果如图:
 
二、标准的HTML表格,必须包括thead和tbody标签
 
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Sex</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>zhangsan</td>
<td>boy</td>
<td>beijing</td>
</tr>
<tr>
<td>lisi</td>
<td>girl</td>
<td>shanghai</td>
</tr>
<tr>
...略
</tr>
</tbody>
</table>

三、设置table可排序
 
$(document).ready(function(){
//第一列不进行排序(索引从0开始)
$.tablesorter.defaults.headers = {0: {sorter: false}};
$(".tablesorter").tablesorter();
});

官方文档:http://tablesorter.com/docs/

补充说明:

在使用过程遇到的一个问题,我的表格数据是通过ajax获取的,首页进行排序的时候没问题

当进行下一页排序的时候,会把上页的数据也重新显示出来,解决这个问题可以在你ajax获取数据之后

触发"update"事件,代码如下:
 
$(".tablesorter").trigger("update");

以上问题着实头疼了很久,刚开始用的官网上的Pager plugin,发现这个不太合适。

又网上查资料 整理以下代码:
 
$(".tablesorter tbody tr").addClass("delete");
$(".tablesorter tbody tr.delete").remove();
$("table tbody").append(html);
$(".tablesorter").trigger("appendCache");
$(".tablesorter").trigger("update");
$(".tablesorter").trigger("sorton",[[[2,1],[0,0]]]);

于是都用上了,久经测试 发现只有$(".tablesorter").trigger("update");这一句能解决问题

其他的不知道是什么东东。

所需文件下载地址:http://xiazai.lovean.com/201405/yuanma/jquery.tablesorter.zip

style.css及图片在themesblue路径下。
最新资讯
刘强东涉嫌性侵案后首发声:京东管理团队已稳定成型

刘强东涉嫌性侵案后首

京东发布第三季度财报后的电话会议上,刘强东在性侵风波
京东高管解读财报:京东因规模而具有独特的竞争优势

京东高管解读财报:京东

根据我们对零售即服务的定义,它基本上有两个部分组成。
阿里健康4-9月营收18.79亿元 同比增长111.2%

阿里健康4-9月营收18.

阿里健康在港交所公告,截至9月30日止六个月,本集团录得
直击|松鼠AI栗浩洋:AI将颠覆任何行业 有四关键词

直击|松鼠AI栗浩洋:AI

乂学教育松鼠AI创始人栗浩洋近日在公开演讲时指出,任何
小米CFO周受资在电话会上一口气曝了这些料

小米CFO周受资在电话

小米CFO周受资在电话会中称,小米已站稳高端市场、与美
天猫双11组委会:退货率仅6% 远低于行业平均水平

天猫双11组委会:退货率

针对今日有关天猫双11退货率的传言,天猫双11组委会在微
最新文章
详解mpvue小程序中怎么引入iconfont字体图标

详解mpvue小程序中怎

这篇文章主要介绍了详解mpvue小程序中怎么引入iconfon
JS如何获取地址栏的参数实例讲解

JS如何获取地址栏的参

本篇文章给大家带来了关于JS如何获取地址栏的参数实例
angularJs利用$scope处理升降序的方法

angularJs利用$scope

今天小编就为大家分享一篇angularJs利用$scope处理升
CKEditor4配置与开发详细中文说明文档

CKEditor4配置与开发

网上分享的CKEditor4中文说明很多都只是的部分使用方
angularjs获取到My97DatePicker选中的值方法

angularjs获取到My97D

今天小编就为大家分享一篇angularjs获取到My97DatePic
vue实现一个炫酷的日历组件

vue实现一个炫酷的日

公司业务新开了一个商家管理微信H5移动端项目,日历控件