jQuery表格排序组件-tablesorter使用示例


Posted in Javascript onMay 26, 2014

一、引入文件

<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" >

效果如图:
jQuery表格排序组件-tablesorter使用示例 
二、标准的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.3water.com/201405/yuanma/jquery.tablesorter.zip

style.css及图片在themes\blue路径下。

Javascript 相关文章推荐
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 #Javascript
js处理表格对table进行修饰
May 26 #Javascript
利用jQuery实现可以编辑的表格
May 26 #Javascript
js实现简单的购物车有图有代码
May 26 #Javascript
js函数参数设置默认值的一种变通实现方法
May 26 #Javascript
单元选择合并变色示例代码
May 26 #Javascript
jquery实现的一个文章自定义分段显示功能
May 23 #Javascript
You might like
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
迟到检讨书范文
2015/01/27 职场文书
运动会广播稿100字
2015/08/19 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
nginx内存池源码解析
2021/11/20 Servers
netty 实现tomcat的示例代码
2022/06/05 Servers