分享

[jQuery Plugin] tablesorter 表格排序效果

 看见就非常 2014-08-21

jQuery|技術分享 作者: daniel

31 三月 2009

DEMO

原始網站:http:///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 甚至可以實現分頁的功能。範例只用了最基本的效果;有興趣的人可以參考網站參數設定 的部分。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约