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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 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与MySQL交互使用详解
2006/10/09 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP实现微信提现功能
2018/09/30 PHP
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JavaScript运算符小结
2015/06/03 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
新手简单了解vue
2019/05/29 Javascript
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
幼儿园消防安全制度
2014/01/26 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android