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动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
vue实现抽屉弹窗效果
Nov 15 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
php除数取整示例
2014/04/24 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
许愿墙中用到的函数
2006/10/07 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
AJAX都有哪些有点和缺点
2012/11/03 面试题
高中军训广播稿
2014/01/14 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
优秀家长自荐材料
2014/08/26 职场文书
六年级学生期末评语
2014/12/26 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
汽车销售员工作总结
2015/08/12 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
Python Matplotlib库实现画局部图
2021/11/17 Python