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 相关文章推荐
event.X和event.clientX的区别分析
Oct 06 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
angular实现商品筛选功能
Feb 01 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
基于JavaScript实现数码时钟效果
Mar 30 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
请离开include_once和require_once
2013/07/18 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
jQuery Form表单取值的方法
2017/01/11 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
python实现简单多人聊天室
2018/12/11 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python实现随机加减法生成器
2020/02/24 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
python破解同事的压缩包密码
2020/10/14 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
护理专科毕业推荐信
2013/11/10 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
党建工作经验交流材料
2014/05/25 职场文书
模特大赛策划方案
2014/05/28 职场文书
委托书范本
2014/09/13 职场文书
幼儿园毕业致辞
2015/07/29 职场文书