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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
JS sort排序详细使用方法示例解析
Sep 27 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中的cookie
2006/11/26 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
js style动态设置table高度
2014/10/21 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
小程序中手机号识别的示例
2020/12/14 Javascript
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
党员批评与自我批评
2014/02/12 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
工地标语大全
2014/06/18 职场文书
初三毕业评语
2014/12/26 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书