<!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>