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框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
Javascript中神奇的this
Jan 20 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
用ADODB.Stream转换
2007/01/22 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
分享Python字符串关键点
2015/12/13 Python
python绘制简单彩虹图
2018/11/19 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
口腔医学技术应届生求职信
2013/11/09 职场文书
销售部主管岗位职责
2013/12/18 职场文书
预备党员公开承诺书
2014/05/28 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
小学英语教学随笔
2015/08/14 职场文书
社会实践心得体会范文
2016/01/14 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript