jQuery 表格排序插件 Tablesorter 使用方式如下:

1.引入头文件(注意一定要把jQuery放在前面):

<script src="lib/jquery-1.8.3.min.js"></script>
<!--tablesorter-->
<link href="css/css_tablesorter_green/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#alltable").tablesorter();
});
</script>

2.在需要使用排序的<Table>上无需做任何设定,很方便:

<table id="alltable" class="tablesorter"  width="584">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

在<thead>上就会有两个小三角符号,点击可以用于排序。

Tablesorter下载地址:http://download.csdn.net/detail/leixiaohua1020/6377187

jQuery 表格排序插件 Tablesorter 使用的更多相关文章

  1. jQuery表格排序总成-tablesorter

    一个.进口单证 <script type="text/javascript" src="js/jquery.js"></script> ...

  2. jQuery表格排序组件-tablesorter

    一.引入文件 <script type="text/javascript" src="js/jquery.js"></script> & ...

  3. jQuery表格排序(tablesorter)

    1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...

  4. jQuery html表格排序插件:tablesorter

    ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...

  5. 表格排序插件datatables

    之前用过表格排序插件tinytables,用到后面,随着需求的更改,发现这个插件真的low到爆了,不适合用于多表格,只有一个表格的页面可以凑合着用,有很多局限性. 之后发现了一款表格排序插件datat ...

  6. jquery 表格排序,实时搜索表格内容

    jquery 表格排序,实时搜索表格内容   演示 XML/HTML Code <table class="table-sort"> <thead> < ...

  7. 表格排序(tablesorter)

    1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...

  8. 一个简洁漂亮的jQuery拖放排序插件DDSort

    拖放排序是WEB应用中常见的功能.虽然网上有很多别人已经造好的轮子,但是就我个人而言,没事就喜欢研究原理,自己造轮子,不管强大与否,简洁够用就是我的目标,再一个就是自己写的东西,应用起来得心应手,修改 ...

  9. jquery表格简单插件

    1.一直对jquery插件感觉非常神奇.今天动手写了一个超级简单的案例. 2.效果 3.体会 a.jquery插件编写能力. 须要具备一定js能力的编写.还有写css样式的运用:希望以后这方面会有提高 ...

随机推荐

  1. SQLserver利用系统时间生成“2015-11-30 00:00:00.000”类型的时间

    select getdate() ---当前时间:2015-12-18 10:20:24.097 -------------------建立测试表 Create Table #Test ( ID IN ...

  2. Rac & DG

    Rac环境: RAC版本异同:[10R2,11R1(和10类似)],11R2,12c: 目录: 10.2的ASM需要单独的目录(oracle home):rdbms home,asm home, cr ...

  3. 将Vim改造为强大的IDE

    1.安装Vim和Vim基本插件 首先安装好Vim和Vim的基本插件.这些使用apt-get安装即可: lingd@ubuntu:~/arm$sudo apt-get install vim vim-s ...

  4. Java 线程池框架核心代码分析

    前言 多线程编程中,为每个任务分配一个线程是不现实的,线程创建的开销和资源消耗都是很高的.线程池应运而生,成为我们管理线程的利器.Java 通过Executor接口,提供了一种标准的方法将任务的提交过 ...

  5. iOS 10 版本适配问题收集-b

    随着iOS10发布的临近,大家的App都需要适配iOS10,下面是我总结的一些关于iOS10适配方面的问题,如果有错误,欢迎指出. 1.系统判断方法失效: 在你的项目中,当需要判断系统版本的话,不要使 ...

  6. sharepoint 列表的column验证----------SharePoint 2010 List Validation Formula

    首先,依次打开-站点->列表名称->列表设置->验证设置: 我们设置一个时间的列不能小于当前时间,并且在编辑的时候不需要验证. =OR([,Created<TODAY())

  7. android 设置叠加父级响应点击事件

    最近做android项目时,需要让button的后面的relatelayout可以点击,但是虽然把button设置成了focusable="false",relatelayout中 ...

  8. HDU 5637 Transform 单源最短路

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5637 题意: http://bestcoder.hdu.edu.cn/contests/contes ...

  9. javascript小实例,PC网页里的拖拽(转)

    这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...

  10. $('li','div') $('div li') $('div li')

    $('div','li')是$(子,父),是从父节点里找子,而不是找li外面的div $('div , li')才是找所有的div和li,之间不存在父子关系 $('div li') 是找div里面所有 ...