jQuery html表格排序插件tablesorter使用方法详解


Posted in Javascript onFebruary 10, 2017

tablesort是一款很好用的jQuery表格排序插件。 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便。
使用jQuery tablesort实现html表格方法:

1. 下载jQuery和tablesort脚本,并在html中引用该脚本文件:

<script type="text/javascript" src="../jquery-latest.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.js"></script>

2. 格式化需要排序的html表格:

a. 给需要排序的表格指定CCS类:class="sort-table"
b. 使用thead和tbody标签来标记表格头和表格正文
c. 在表格头thead中需要使用th标签定义表头
格式化好的html表格如下所示:

<table border=1 width="800px" class="sort-table">
<thead>
 <tr>
 <th>Date</th>
 <th>Usage</th>
 <th>Cost</th>
 <th>Remain</th>
 </tr>
</thead>
<tbody>
 <tr>
 <td>2008-3-25</td>
 <td>book place @dhgu</td>
 <td>-40</td>
 <td>-40</td>
 </tr>
 <tr>
 <td>2008-4-1</td>
 <td>book place @dhgu</td>
 <td>-40</td>
 <td>-80</td>
 </tr>
</tbody>
</table>

3. 添加jQuery代码,启用html表格排序:
在body中对在第二步中指定的排序表格css类调用tablesorter()函数:

<body>
<script type="text/javascript">
 $(document).ready(function() {
 $(".sort-table").tablesorter(); 
 });
</script>

通过上面的3步,jQuery tablesort就可以实现对html表格的排序。

下载jQuery插件tablesort

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 #Javascript
jQuery排序插件tableSorter使用方法
Feb 10 #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
You might like
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
python基础教程之缩进介绍
2014/08/29 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
python右对齐的实例方法
2020/07/05 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
公安学专业求职信
2014/07/27 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书