这篇文章主要介绍了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路径下。
最新资讯
雷军:五十而已

雷军:五十而已

40岁依然不甘心的雷军,还是选择再出发一次。
国家邮政局:1-7月,邮政行业业务总量完成10497.9亿元

国家邮政局:1-7月,邮政

1-7月,邮政行业业务总量完成10497.9亿元,同比增长23.79%
知道你们大夏天受不了这种臭味,科学家找出了新的解决方案……

知道你们大夏天受不了

科学家仔细追溯了汗臭味的来源,揭示出人类腋窝散发气味
机构:预测二季度全球智能音箱销量达3000万台

机构:预测二季度全球智

据Strategy Analytics初步预测,在新冠疫情影响下,2020年
基金暴跌那几天,我都不敢看支付宝……︱信息回避是怎么回事?

基金暴跌那几天,我都不

我们通常会尝试回避让我们不快乐的信息,摇摇头装作没看
9价比4价更好?专家解答HPV疫苗6大疑问!

9价比4价更好?专家解答

HPV疫苗是有效且安全的,年龄越小接种效果越好。怀孕期
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大