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 异常处理使用总结
Jun 21 Javascript
JQuery 解析多维的Json数据格式
Nov 02 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
Bootstrap Table使用整理(二)
Jun 09 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
iview实现图片上传功能
Jun 29 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开发入门教程之面向对象
2006/12/05 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php生成zip文件类实例
2015/04/07 PHP
基于jquery的动态创建表格的插件
2011/04/05 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
js仿360开机效果
2019/12/26 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
Python基于回溯法解决01背包问题实例
2017/12/06 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
python re的findall和finditer的区别详解
2020/11/15 Python
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
大学生村官工作感言
2014/01/10 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
股东合作协议书范本
2014/04/14 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
Python的property属性详细讲解
2022/04/11 Python
使用Python开发冰球小游戏
2022/04/30 Python