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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
JavaScript中return false的用法
Mar 12 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Flask框架web开发之零基础入门
2018/12/10 Python
PyTorch中permute的用法详解
2019/12/30 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
生产部主管岗位职责
2014/01/06 职场文书
标准自荐信范文
2014/01/29 职场文书
课程改革实施方案
2014/03/16 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python