對這文章發表回應
發表限制: 非會員 可以發表
發表者： 冷日 發表時間： 2012/10/21 9:06:25
2011-09-27 17:34 jQuery - tablesorter
參考網址：http://tablesorter.com/docs/
作法筆記：
在<head>和</head>之間加入↓
<script type=
<script type=
有幾個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 日期欄位
原文出處：
jQuery - tablesorter @ 紅小豆的筆記本 :: 隨意窩 Xuite日誌