2014-11-22

[Javascript] jQuery TableSorter - HTML Table 排序功能

在之前有介紹過一個 HTML Table 加上排序功能的做法 - SortTable,是個人僅次於 jQuery TableSorter 的另一個愛用 Sort Plugin。

個人在使用排序 Plugin 時,大都只用到兩個功能,也就是哪些欄位可以排序,哪些欄位不可排序,在此也記錄一下 jQuery TableSorter 這兩個功能要如何實現。

因為它是 base on jQuery,所以要 include jQuery.js:
// 引用 jQuery.js 和 TableSorter.js
<script src="jquery.js" type="text/javascript"></script>
<script src="tablesorter.js" type="text/javascript"></script>

注意!! Table 的 title,要有 <thead>,以及要用 <th>:
<table id="tbl">
    <thead>> 
        <tr> 
            <th>title1</th> 
            <th>title2</th> 
        </tr> 
    </thead> 
</table>

使用 TableSorter 加上排序功能:
$("#tbl").tablesorter();

以上步驟便完成所有欄位的排序功能,那要如何取消某些欄位的排序功能呢:
$("table").tablesorter({ 
 // 禁止第1和2欄位不可排序
    headers: { 
        1: { 
            sorter: false 
        }, 
        2: { 
            sorter: false 
        } 
 } 
}); 


參考來源:jQuery TableSorter

1 則留言: