茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1670173 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_011.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [轉貼]tablesorter 表格排序效果

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]tablesorter 表格排序效果

[jQuery Plugin] tablesorter 表格排序效果


分類:
jQuery|
技術分享 作者: daniel



31
三月
2009





DEMO


原始網站:
http://tablesorter.com/docs/


表格一直是網頁呈現資料的最佳幫手,井然有序的將資料分門別類。但是如果僅由程式端對資料庫進行排序,在資料量並不多的情況下,無疑是對資料庫增加無謂的負擔;利用 JavaScript 對少量資料進行即時性的排序其實從以前就很常見,不過透過 jQuery 的幫助,
tablesorter 能更簡單的對表格進行排序,同時也能經由參數的設定,讓表格排序能更加靈活的呈現。




使用的方式非常簡單,一開始先設計一個 HTML 表格元件:




<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>姓名</th>
<th>生日</th>
<th>身高</th>
<th>體重</th>
<th>三圍</th>
</tr>
</thead>
<tbody>
<tr>
<td>林志玲</td>
<td>1974-11-29</td>
<td>174cm</td>
<td>52kg</td>
<td>34C、24、36</td>
</tr>
<tr>
<td>隋棠</td>
<td>1981-10-22</td>
<td>172cm</td>
<td>48kg</td>
<td>33B、23、34</td>
</tr>
<tr>
<td>白歆惠</td>
<td>1982-10-23</td>
<td>175cm</td>
<td>50kg</td>
<td>33B、23、35</td>
</tr>
<tr>
<td>林嘉綺</td>
<td>1977-09-10</td>
<td>180cm</td>
<td>56kg</td>
<td>34D、25、35</td>
</tr>
</tbody>
</table>



接下來載入 jQuery 以及 tablesorter:




<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>



然後插入 JavaScript:




<script type="text/javascript">
$(function () {
// widgets: ['zebra'] 這個參數,能對表格的奇偶數列作分色處理
$("#myTable").tablesorter({widgets: ['zebra']});
 
});
</script>



呈現的效果如下:

tablesorter 呈現效果




範例程式下載


其他還有很多參數可以設定,如預設排序、Ajax 加入表格等,另外搭配作者提供的
jquery.tablesorter.pager.js 甚至可以實現分頁的功能。範例只用了最基本的效果;有興趣的人可以參考
網站參數設定 的部分。




原文出處: [jQuery Plugin] tablesorter 表格排序效果 - 哇寶部落格
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[轉貼]jQuery - tablesorter

2011-09-27 17:34 jQuery - tablesorter

參考網址: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>


日期欄位不可有「&nbsp;」,不然會無法正常排序

在sql裡select時,將日期欄位處理一下,就會是整齊的10碼(例:2011/02/25)
convert(varchar(10),convert(smalldatetime,日期欄位),111) as 日期欄位


原文出處:
jQuery - tablesorter @ 紅小豆的筆記本 :: 隨意窩 Xuite日誌
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15771
[分享]jQuery - tablesorter 官方幾個範例
tablesorterSet 官方範例:

1.預設排序欄位(Set a initial sorting order using options):
$(document).ready(function() {
  // call the tablesorter plugin
  $("table").tablesorter({
    // sort on the first column and third column, order asc
    sortList: [[0,0],[2,0]]
  });
});

說明:
利用 sortList 給定預設一起動要排序的欄位
參數是二維陣列
第一碼決定排序欄(直欄,從 0 開始)第二碼決定 asc 或 desc(0 表 asc 1 表 desc) ex : [0,0]
如果要多欄位一起排序的話,再繼續往上加,如範例中的第一欄與第三欄升冪排序 ex : [[0,0],[2,0]]

2.取消某些欄位排序功能(Disable header using options):
$(document).ready(function() {
  $("table").tablesorter({
    // pass the headers argument and assing a object
    headers: {
      // assign the secound column (we start counting zero)
      1: {
        // disable it by setting the property sorter to false
        sorter: false
      },
        // assign the third column (we start counting zero)
      2: {
        // disable it by setting the property sorter to false
        sorter: false
      }
    }
  });
});

說明:
利用 headers 給定不提供排序功能的欄位
參數是告訴他哪個欄位 sorter: false
先決定哪個欄位不能排序,把他的 index 寫上 ex : 1:
然後告訴 tablesorter 不給排序 ex : { sorter: false }

3.不使用 header 來排序(Sort table using a link outside the table):
$(document).ready(function() {
  $("table").tablesorter();
  $("#trigger-link").click(function() {
    // set sorting column and direction, this will sort on the first and third column the column index starts at zero
    var sorting = [[0,0],[2,0]];
    // sort on the first column
    $("table").trigger("sorton",[sorting]);
    // return false to stop default link action
    return false;
  });
});

說明:
建立一個 link 來提供排序功能
所以要先建立一個 link 並把他的 id 設成 trigger-link ex : sort first and third columns
然後再 Jquery 的 JavaScript 中把他設定好 ex : $("#trigger-link").click(function()
先決定哪些欄位是點擊本 link 時會排序的欄位 ex : var sorting = [[0,0],[2,0]];
再告訴 Jquery link 被 trigger 時要做啥(當然就是排序啦) ex : $("table").trigger("sorton",[sorting]);
最後傳回一個 false 來結束本 action ex : return false;

4.強制排序某欄位(Force a default sorting order):
$(document).ready(function() {
  // call the tablesorter plugin
  $("table").tablesorter({
    // set forced sort on the fourth column and i decending order.
    sortForce: [[0,0]]
  });
});


5.改變多欄位排序時的選定鈕(Change multi-column sorting key)
$(document).ready(function() {
  // call the tablesorter plugin
  $("table").tablesorter({
    // change the multi sort key from the default shift to alt button
    sortMultiSortKey: 'altKey'
  });
});


6.Dealing with digits
$(document).ready(function() {
  // call the tablesorter plugin
  $("table").tablesorter();
});


註:沒寫說明的幾個 example 是冷日覺得沒用到,也看不太懂的 example,先擺著吧,未來有空再來找機會更新!


原文出處:http://tablesorter.com/docs/index.html#Examples
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|