發表者

討論內容

冷日
(冷日)

發表時間：2012/10/21 9:06

Webmaster

註冊日: 2008/2/19
來自:
發表數: 15771

[轉貼]jQuery - tablesorter

2011-09-27 17:34 jQuery - tablesorter

參考網址：http://tablesorter.com/docs/

作法筆記：

在<head>和</head>之間加入↓

有幾個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名稱需與上面呼應)

第一列用來點選排序的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>