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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
vue滑动吸顶及锚点定位的示例代码
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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
web 页面分页打印的实现
2009/06/22 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
4个顶级开源JavaScript图表库
2018/09/29 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
python购物车程序简单代码
2018/04/18 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
PageFactory设计模式基于python实现
2020/04/14 Python
利用Python优雅的登录校园网
2020/10/21 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
中学教师师德承诺书
2014/05/23 职场文书
元旦晚会活动总结
2014/07/09 职场文书
离婚协议书范本2014
2014/10/27 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS