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 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php 读取文件乱码问题
2010/02/20 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
jquery连缀语法如何实现
2012/11/29 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
python安装scipy的方法步骤
2019/06/26 Python
python是否适合网页编程详解
2019/10/04 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
C++是不是类型安全的
2014/02/18 面试题
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
婚前保证书范文
2015/02/28 职场文书
Python 如何安装Selenium
2021/05/06 Python
python process模块的使用简介
2021/05/14 Python
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android