Table排序

<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>
https://files.cnblogs.com/files/feige/Table%E6%8E%92%E5%BA%8Ftablesorter%E6%8F%92%E4%BB%B6.rar

 

posted @ 2016-11-08 22:44  金融之王  阅读(384)  评论(0编辑  收藏  举报