Table排序

时间：2022-09-10 14:05:04
<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&period;tablesorter&period;js

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

  3. js实现table排序（jQuery下的jquery&period;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&period;js

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

  7. DWZ &lpar;JUI&rpar; 教程 table 排序

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

  8. VUE &plus;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. EF6 Create Different DataContext on runtime&lpar;运行时改变连接字符串&rpar;

    引言   在使用EF时,有时我们需要在程序运行过程中动态更改EF的连接字符串,但不幸的时EF是否对 ConfigurationManager.RefreshSection("xxx&quot ...

  2. jquery 中的 return false 不起作用

    jquery  中的 return false 不起作用 $(".lcId").each(function(e) { if ($(this).attr("checked& ...

  3. &lbrack;Effective Java&rsqb;第十章 并发

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. PULL解析

    PULL解析类似于SAX解析,都采用事件驱动(利用getEventType()方法)方式进行解析,当PULL解析器开始解析之后,可以不断地调用PULL解析器的next()方法获取下一个解析事件(开始文 ...

  5. Spring注解&commat;Qualifier

    在使用Spring框架中@Autowired标签时默认情况下使用 @Autowired 注释进行自动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个.当找不到一个匹配的 Bean ...

  6. myEclipse出现cannot paste the clipboard contents into the selected elements报错

    导入jar包报错,cannot paste the clipboard contents into the selected elements,查阅资料让重新打开工程,但依然报错. 最后在本地路径复制 ...

  7. BeautifulSoup类

    from bs4 import BeautifulSoup soup1 = BeautifulSoup("<html>data</html>"," ...

  8. Vue获取dom和数据监听

    Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...

  9. Ubuntu16&period;04常用软件源

    这篇博文的,主要目的是为了方便我和大家安装软件.我将我安装过的所有软件包的源列在此处. Google Chrome sudo wget https://repo.fdzh.org/chrome/goo ...

  10. ASP&period;NET Web API 入门 （API接口、寄宿方式、HttpClient调用）

    一.ASP.NET Web API接口定义 ASP.NET Web API默认实现了Action方法和HTTP方法的映射,Action方法方法名体现了其能处理的请求必须采用的HTTP方法 二.寄宿方式 ...

相关文章