<html>
<head>
<title>tablesorter表单排序插件</title> <link type ="text/css" href="default.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script> <script type="text/javascript">
//以下代码表示对特定的Table排序
$(function() {
$("#feigeTable").tablesorter();
//$("#largess1").tablesorter();
}); </script>
</head> <body>
<h3><td class="{sortValue: 0}">80</td>表示自定义的顺序,表示单击该列时,80排到第一的位置</h3>
<table id="feigeTable" cellspacing="0"> <thead> <tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
<th>Geometry</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th> <th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
<th>Geometry</th> </tr>
</tfoot>
<tbody id="feige">
<tr>
<td>买</td>
<td>Languages</td>
<td>male</td> <td >80</td>
<td>70</td>
<td>75</td>
<td>80</td>
<td><select><option>brian</option><option>christian</option></select></td>
</tr>
<tr>
<td>卖</td> <td>Mathematics</td>
<td>male</td>
<td>90</td>
<td>88</td>
<td>100</td>
<td>90</td>
<td><select><option>brian</option><option>christian</option></select></td>
</tr>
<tr>
<td>买</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>95</td> <td>80</td>
<td>85</td>
<td><select><option>brian</option><option>christian</option></select></td>
</tr>
<tr>
<td>卖</td>
<td>Languages</td>
<td>male</td> <td>60</td>
<td>90</td>
<td>100</td>
<td>100</td>
<td><select><option>angus</option><option>zebra</option></select></td>
</tr>
</tbody>
</table> <h3>只是第二个表单,没有排序</h3>
<table id="feigeTable2" cellspacing="0"> <thead> <tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th class="{sorter:'metadata'}">English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
<th>Geometry</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th> <th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
<th>Geometry</th> </tr>
</tfoot>
<tbody id="feige1">
<tr>
<td>买</td>
<td>Languages</td>
<td>male</td> <td class="{sortValue: 0}">80</td>
<td>70</td>
<td>75</td>
<td>80</td>
<td><select><option>brian</option><option>christian</option></select></td>
</tr>
<tr>
<td>卖</td> <td>Mathematics</td>
<td>male</td>
<td class="{sortValue: 1}">90</td>
<td>88</td>
<td>100</td>
<td>90</td>
<td><select><option>brian</option><option>christian</option></select></td>
</tr>
<tr>
<td>买</td>
<td>Languages</td>
<td>female</td>
<td class="{sortValue: 2}">85</td>
<td>95</td> <td>80</td>
<td>85</td>
<td><select><option>brian</option><option>christian</option></select></td>
</tr>
<tr>
<td>卖</td>
<td>Languages</td>
<td>male</td> <td class="{sortValue: 3}">60</td>
<td>90</td>
<td>100</td>
<td>100</td>
<td><select><option>angus</option><option>zebra</option></select></td>
</tr>
</tbody>
</table> </body>
</html>
http://files.cnblogs.com/files/feige/Table%E6%8E%92%E5%BA%8Ftablesorter%E6%8F%92%E4%BB%B6.rar

Table排序的更多相关文章

  1. lua table排序报错与解决

    lua table排序 table的sort函数 比如按照大小进行排序,下面这种写法在某些情况下可能会排序错误,甚至报invalid order function for sorting table. ...

  2. javascript table排序之jquery.tablesorter.js

    table排序 jquery.tablesorter.js 一.Demo下载地址: 1.tablesorter.js下载地址: http://download.csdn.net/detail/zhan ...

  3. js实现table排序(jQuery下的jquery.sortElements)

    项目中要实现table排序的功能. 网上有非常多解决方式,非常多都基于jQuery. jquery.tablesorter.大小17KB.只是他的首页在ie10下兼容性有点问题. DataTables ...

  4. lua的table排序

    lua中利用到的排序的基本上就是构造函数(table)了,为了便于和C区分开来,我俗称它为表单. 实例:(原理就是LUA集成的冒泡算法) 排序的一般姿势(对于只包含数字或者只包含字符串的简单数组) t ...

  5. lua table 排序--满足多条件排序

    前提 假设 一个小怪 有三种属性,等级(level).品质(quality).id(pid) 我们需要对他们进行排序,两种排序情况,第一是单一属性排序,比如按照等级进行排序,或者多种属性进行优先级排序 ...

  6. js实现table排序-sortable.js

    方案一.引用sortable.js包 /* <th class="thcss" style="width: 40px;" onclick="so ...

  7. DWZ (JUI) 教程 table 排序

    dwz排序是后台排序,不是前台的js排序,他的流程和搜索,分页是一样的,当你点击排序的按钮时,从新发送请求刷新当前的navTable 和 dialog. <th width="60&q ...

  8. VUE +element el-table运用sortable 拖拽table排序,实现行排序,列排序

    Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable ...

  9. jQuery对table排序

    <script> //col对应列,cmp两数比较方法,返回值为TRUE,FALSE function sort(col, cmp) { var table = $("#test ...

随机推荐

  1. PHP 使用 curl_* 系列函数和 curl_multi_* 系列函数进行多接口调用时的性能对比

    在页面中调用的服务较多时,使用并行方式,即使用 curl_multi_* 系列函数耗时要小于 curl_* 系列函数. 测试环境 操作系统:Windows x64 Server:Apache PHP: ...

  2. C#网络编程之---TCP协议的同步通信(二)

    上一篇学习日记C#网络编程之--TCP协议(一)中以服务端接受客户端的请求连接结尾既然服务端已经与客户端建立了连接,那么沟通通道已经打通,载满数据的小火车就可以彼此传送和接收了.现在让我们来看看数据的 ...

  3. Maven环境搭建

    1,下载maven zip版   http://maven.apache.org/download.cgi 2,配置maven环境变量 (1) 新建MAVEN_HOME环境变量  E:\TOOLS\A ...

  4. jvisualVM 分析heapdump

    代码很简单,eclipse里面设置下最大堆空间为128m,: @Test public void testOutOfMemory() { List<NewsAddDto> document ...

  5. iOS真机测试,为Provisioning添加设备 -- based xcode6[原]

    iOS真机测试,  我们需要添加几台新的设备进行测试.我们只需要对Provisioning Profiles 进行更新. 1. 在苹果开发者中心添加测试设备 打开苹果Certificates, Ide ...

  6. 使用Jmeter监测服务器cpu、内存等性能

    jmeter中可以监控服务器的CPU和内存使用情况,但是需要安装一些插件还需要在被监测服务器上开启服务. 1.下载JMeterPlugins-Standard-1.4.0.zip插件.下载后将JMet ...

  7. 申请使用aws的一些笔记

    1. 申请可以使用asw.amazon.com/cn/,这个界面虽然是中文的,但是申请的是海外的aws. 2. 审核后会收到如下的一封邮件: 3. 剩下创建EC2和RDS的过程可以参考http://w ...

  8. ORA-29275: partial multibyte character

    查询表报错 修改方式1 和字符集存储方式有关系 ,修改客户端和服务器的字符集存储方害死 修改方式2 修改表的字段由nvarchar2修改为varchar2

  9. 一些NSArray,NSDictionary,NSSet相关的算法知识

    iOS编程当中的几个集合类:NSArray,NSDictionary,NSSet以及对应的Mutable版本,应该所有人都用过.只是简单使用的话,相信没人会用错,但要做到高效(时间复杂度)精确(业务准 ...

  10. DNS CNAME的一些细节

    1, 概述 DNS中的CNAME可以减轻运维压力,使得已有的DNS配置具有一定的灵活性和可扩展性.本文对CNAME中的一些细节做阐述, 使DNS服务器的运维人员和开发人员能合理地使用CNAME. 2, ...