參考網址:http://tablesorter.com/docs/
作法筆記:
在<head>和</head>之間加入↓
<script type= src= ></script>
<script type= src= ></script>
有幾個table需要排序就加幾個myTable... ↓ 名稱需與table裡的id相呼應
<script type="text/javascript">
$(function() {
$("#myTable1").tablesorter( {sortList: [[0,0]]} );
$("#myTable2").tablesorter( {sortList: [[0,0]]} );
$("#myTable3").tablesorter( {sortList: [[0,0]]} );
});
</script>
CSS的部份,一定要將 th.header 放在th.headerSortUp和th.headerSortDown之上,不然圖示不會變......
<style type="text/css">
th.header {
background-image: url(script/jquery_tablesorter/themes/blue/bg.gif);
cursor: pointer;
font-weight: bold;
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
border-right: 1px solid #dad9c7;
margin-left: -1px;
}
th.headerSortUp {
background-image: url(script/jquery_tablesorter/themes/blue/asc.gif);
background-color: #FFB121;
}
th.headerSortDown {
background-image: url(script/jquery_tablesorter/themes/blue/desc.gif);
background-color: #FFB121;
}
Table部份..... 要加上class和id (id名稱需與上面呼應)
<Table >
第一列用來點選排序的TR,要 用THEAD包起來
<THEAD >
<TR>
這裡的TD,要改成TH !!!!!!
<TH>抬頭1</TH>
<TH>抬頭2</TH>
<TH>抬頭3</TH>
</TR>
</THEAD>
若有TFOOT,可以接在THEAD之後加入
<TFOOT>
<TR>
<TD>腳腳1</TD>
<TD>腳腳2</TD>
<TD>腳腳3</TD>
</TR>
</TFOOT>
再來是資料內容的部份,要用 TBODY包起來才可以排序
<TBODY>
<TR>
<TD>資料1</TD>
<TD>資料2</TD>
<TD>資料3</TD>
</TR>
</TBODY>
</Table>
日期欄位不可有「 」,不然會無法正常排序
在sql裡select時,將日期欄位處理一下,就會是整齊的10碼(例:2011/02/25)
convert(varchar(10),convert(smalldatetime,日期欄位),111) as 日期欄位