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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
简单的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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
Exjs 入门篇
2010/04/07 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
JavaScript模拟push
2016/03/06 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
Python测试模块doctest使用解析
2019/08/10 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
大学生实习证明范本
2014/01/15 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
美术教师岗位职责
2014/03/18 职场文书
父亲节活动总结
2015/02/12 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers