<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tablesort表格排序</title>
<style>
/* 自定义设置排序指示箭头 */
.SortDescCss{background-image:url(Desc.gif);background-repeat:no-repeat;background-position:right center;}
.SortAscCss{background-image:url(Asc.gif);background-repeat:no-repeat;background-position:right center;}
</style>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" id="myTable">
<tr>
<th>序号</th>
<th>姓名</th>
<th>工号</th>
<th>职位</th>
<th>性别</th>
<th>业绩</th>
<th>报到时间</th>
</tr>
<tr>
<td>1</td>
<td>刘德华</td>
<td>8008</td>
<td>总裁</td>
<td>男</td>
<td>98</td>
<td>2008-04-12</td>
</tr>
<tr>
<td>2</td>
<td>吴奇隆</td>
<td>8004</td>
<td>主管</td>
<td>男</td>
<td>80</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>3</td>
<td>王光良</td>
<td>8003</td>
<td>经理</td>
<td>男</td>
<td>85</td>
<td>2008-04-15</td>
</tr>
<tr>
<td>4</td>
<td>张学友</td>
<td>8009</td>
<td>副总裁</td>
<td>男</td>
<td>90</td>
<td>2008-04-11</td>
</tr>
<tr>
<td>5</td>
<td>张柏芝</td>
<td>8005</td>
<td>助理</td>
<td>女</td>
<td>78</td>
<td>2008-04-13</td>
</tr>
<tr>
<td>6</td>
<td>陈冠希</td>
<td>8001</td>
<td>总监</td>
<td>男</td>
<td>60</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>7</td>
<td>陈慧琳</td>
<td>8002</td>
<td>试用期</td>
<td>女</td>
<td>85</td>
<td>2008-04-18</td>
</tr>
<tr>
<td>8</td>
<td>张曼玉</td>
<td>8007</td>
<td>高级经理</td>
<td>女</td>
<td>82</td>
<td>2008-04-16</td>
</tr>
<tr>
<td>9</td>
<td>周润发</td>
<td>8006</td>
<td>副总裁</td>
<td>男</td>
<td>88</td>
<td>2008-04-13</td>
</tr>
</table>
<br />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="tablesorter.js"></script>
<script>
//点击任意表头可以排序
new TableSorter("myTable");
//点击0,2,5,6表头可以排序
new TableSorter("myTable", 0, 2 , 5, 6);
//点击表头排序并且返回提示
new TableSorter("myTable").OnSorted = function(c, t){
//Asc升序，Desc降序
alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));
}
</script>
</body>
</html>
