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 相关文章推荐
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
vue-cli的eslint相关用法
2017/09/29 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
益模软件Java笔试题
2012/03/27 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
师范生自荐信
2013/10/27 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript