 |
|
茫茫網海中的冷日
發生過的事，不可能遺忘，只是想不起來而已！ |
|
|
恭喜您是本站第 1729111
位訪客!
登入 | 註冊
|
|
|
|
| 發表者 |
討論內容 |
冷日
(冷日) |
發表時間：2012/10/23 1:15 |
- 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
|
|
|
討論串
|
[轉貼]tablesorter 表格排序效果 (冷日