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针对DOM的应用分析(四)
Apr 15 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
ThinkPHP控制器详解
2015/07/27 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
教育实习指导教师评语
2014/12/31 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
MySQL插入数据与查询数据
2022/03/25 MySQL
利用Python多线程实现图片下载器
2022/03/25 Python