星期五, 8月 22, 2008

jQuery Plugin: Tablesorter

jQuery Plugin: Tablesorter官方網址

相當方便的套件
只需啟動就提供全欄位的排序

1.安裝
載好jquery.tablesorter.js檔案
2.啟動

$("#table1").tablesorter(); //對指定的table
$("table").tablesorter(); //對所有table做啟動tablesorter,即可有排序的能力

當然也可設定某些欄位不提供排序功能

$(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
}
}
});
});

另外完整的範例包也有設定css
效果也滿不錯的,例如被點選要排序的欄位會反白的效果
要直接套用,只需在該table再加上class="tablesorter" //css中的class名

動態加入新資料
當已完成.tablesorter() 後
如增加了新的資料列,需要改用update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);


官方說明
*Sort table using a link outside the table
可由外部trigger sorting

沒有留言: