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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
动态刷新 dorado树的js代码
Jun 12 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
Html5生成验证码的示例代码
May 10 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
中国的第一台收音机
2021/03/01 无线电
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
js转换对象为xml
2017/02/17 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
javascript中的面向对象
2017/03/30 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
python如何实时获取tcpdump输出
2020/09/16 Python
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
工作个人的自我评价
2014/01/14 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
电钳工人个人求职信
2014/05/10 职场文书
社区志愿者培训方案
2014/06/10 职场文书
七一建党节演讲稿
2014/09/11 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
计划生育工作总结2015
2015/04/03 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
JavaScript实现优先级队列
2021/12/06 Javascript