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 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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
php 获取远程网页内容的函数
2009/09/08 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
js实现消息滚动效果
2017/01/18 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
Python常见字典内建函数用法示例
2018/05/14 Python
Python最小二乘法矩阵
2019/01/02 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
会计专业的自荐信
2013/12/12 职场文书
建筑工地质量标语
2014/06/12 职场文书
施工安全员岗位职责
2015/04/11 职场文书
困难补助申请报告
2015/05/19 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python