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 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
js 操作符实例代码
Oct 24 Javascript
jquery异步请求实例代码
Jun 21 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
js实现弹幕飞机效果
Aug 27 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函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
利用Python开发实现简单的记事本
2016/11/15 Python
python去掉空白行的多种实现代码
2018/03/19 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
python3注册全局热键的实现
2020/03/22 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
Python图像读写方法对比
2020/11/16 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
简历中自我评价范文3则
2013/12/14 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
运动员获奖感言
2014/08/15 职场文书
实习护士自荐信
2015/03/25 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python