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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
在线编辑器中换行与内容自动提取
Apr 24 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
JavaScript 函数的执行过程
May 09 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
js实现无刷新监听URL的变化示例代码详解
Jun 03 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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
babel基本使用详解
2017/02/17 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
单链表反转python实现代码示例
2018/02/08 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python str字符串转uuid实例
2020/03/03 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
初中政治教学反思
2014/01/17 职场文书
优秀求职信范文分享
2014/01/26 职场文书
高中家长寄语
2014/04/02 职场文书
合作协议书格式
2014/08/19 职场文书
个人整改方案范文
2014/10/25 职场文书
事业单位考察材料范文
2014/12/25 职场文书
聘任合同书
2015/09/21 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python