jQuery排序插件tableSorter使用方法


Posted in Javascript onFebruary 10, 2017

本文实例为大家分享了jQuery排序插件tableSorter的使用方法,供大家参考,具体内容如下

1.先引两个js

<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.tablesorter.min.js"></script>

注意:表格要用thead/th和tbody。如:

<table id="myTable"> 
<thead> 
<tr> 
  <th>Last Name</th> 
  <th>First Name</th> 
  <th>Email</th> 
  <th>Due</th> 
  <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
  <td>Smith</td> 
  <td>John</td> 
  <td>jsmith@gmail.com</td> 
  <td>$50.00</td> 
  <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
  <td>Bach</td> 
  <td>Frank</td> 
  <td>fbach@yahoo.com</td> 
  <td>$50.00</td> 
  <td>http://www.frank.com</td> 
</tr> 
</tbody>
<table>

3.调用排序js代码

<script type="text/javascript">
$(document).ready(function() {
  $("#mytable").tablesorter();
});
</script>

再回到页面点击第一行就可以进行排序了.

ps:

  1.一定要引jQuery包,所有jq插件都是基于jQuery包的

  2.如果想指定哪一栏不排序这样写

    $("#mytable").tablesorter({headers:{5:{sorter:false}}});

  第5列的sorter为false就OK了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 #Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 #Javascript
BootStrapValidator初使用教程详解
Feb 10 #Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 #Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 #Javascript
JS实现的数字格式化功能示例
Feb 10 #Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 #Javascript
You might like
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
pyside写ui界面入门示例
2014/01/22 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python线程threading模块用法详解
2020/02/26 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
门市房租房协议书
2014/12/04 职场文书
公司内部升职自荐信
2015/03/27 职场文书
2015年采购部工作总结
2015/04/23 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏