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 相关文章推荐
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
canvas的神奇用法
Feb 03 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
杏林同学录(九)
2006/10/09 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php实现httpRequest的方法
2015/03/13 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
Python第三方库的安装方法总结
2016/06/06 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
django自定义模板标签过程解析
2019/12/14 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
幼儿园招生广告
2014/03/19 职场文书
《画家乡》教学反思
2014/04/22 职场文书
增员口号大全
2014/06/18 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
投资入股合作协议书
2014/10/28 职场文书
中秋节慰问信
2015/02/15 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
redis cluster支持pipeline的实现思路
2021/06/23 Redis
正则表达式拆分url实例代码
2022/02/24 Java/Android