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 相关文章推荐
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
使用js 设置url参数
Jul 08 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
浅谈js闭包理解
Apr 01 Javascript
Vue 3.0 全家桶抢先体验
Apr 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来写记数器(详细介绍)
2006/10/09 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
vue项目实战总结篇
2018/02/11 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
Python选课系统开发程序
2016/09/02 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
python实现音乐下载器
2018/04/15 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
业务员岗位职责
2013/11/16 职场文书
二手书店创业计划书
2014/01/16 职场文书
教导处教学工作总结
2015/08/12 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
关于python类SortedList详解
2021/09/04 Python
mysql如何能有效防止删库跑路
2021/10/05 MySQL