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里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
js网页右下角提示框实例
Oct 14 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
桌面中心(一)创建数据库
2006/10/09 PHP
php中apc缓存使用示例
2013/12/25 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
python3 读取Excel表格中的数据
2018/10/16 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
小区门卫岗位职责
2013/12/31 职场文书
建房协议书
2014/04/11 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
县委务虚会发言材料
2014/10/20 职场文书
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS