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 相关文章推荐
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
VUE 实现element upload上传图片到阿里云
Aug 12 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实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript简介
2015/02/15 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
小程序实现抽奖动画
2020/04/16 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
EJB的激活机制
2013/10/25 面试题
夜大毕业自我鉴定
2013/10/11 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
和谐社区口号
2014/06/19 职场文书
招标授权委托书样本
2014/09/23 职场文书
先进人物事迹材料
2014/12/29 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
Python编写nmap扫描工具
2021/07/21 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
MySQL里面的子查询的基本使用
2021/08/02 MySQL