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计数器 刷新1次加1次访问
Sep 20 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
domReady的实现案例
Nov 23 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
javascript 中的继承实例详解
May 05 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
微信小程序音乐播放器开发
Nov 20 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
一个程序下载的管理程序(三)
2006/10/09 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
一个简单的php路由类
2016/05/29 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
JavaScript 调试器简介
2009/02/21 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
浅谈angular2路由预加载策略
2017/10/04 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python3实现微型的web服务器
2019/09/03 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
flask开启多线程的具体方法
2020/08/02 Python
农村婚礼主持词
2014/03/13 职场文书
学校开学标语
2014/10/06 职场文书
离婚协议书的范本
2015/01/27 职场文书
检举信的写法
2019/04/10 职场文书