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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
用函数读出数据表内容放入二维数组
2006/10/09 PHP
PHP文本操作类
2006/11/25 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php中异常处理方法小结
2015/01/09 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
Vue 打包体积优化方案小结
2020/05/20 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
使用Python神器对付12306变态验证码
2016/01/05 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python实现自动发送报警监控邮件
2018/06/21 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
详解Python中的测试工具
2019/06/09 Python
python join方法使用详解
2019/07/30 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
python实现文法左递归的消除方法
2020/05/22 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python 解决函数返回return的问题
2020/12/05 Python
卫生标语大全
2014/06/21 职场文书
建筑安全责任书范本
2014/07/24 职场文书
新员工入职感想
2015/08/07 职场文书
python运算符之与用户交互
2022/04/13 Python