jQuery html表格排序插件tablesorter使用方法詳解
tablesort是一款很好用的jQuery表格排序插件。 支持多種數(shù)據(jù)類型排序,會自動識別表格內(nèi)容數(shù)據(jù)類型,使用也非常方便。
使用jQuery tablesort實現(xiàn)html表格方法:
1. 下載jQuery和tablesort腳本,并在html中引用該腳本文件:
<script type="text/javascript" src="../jquery-latest.js"></script> <script type="text/javascript" src="../jquery.tablesorter.js"></script>
2. 格式化需要排序的html表格:
a. 給需要排序的表格指定CCS類:class="sort-table"
b. 使用thead和tbody標(biāo)簽來標(biāo)記表格頭和表格正文
c. 在表格頭thead中需要使用th標(biāo)簽定義表頭
格式化好的html表格如下所示:
<table border=1 width="800px" class="sort-table"> <thead> <tr> <th>Date</th> <th>Usage</th> <th>Cost</th> <th>Remain</th> </tr> </thead> <tbody> <tr> <td>2008-3-25</td> <td>book place @dhgu</td> <td>-40</td> <td>-40</td> </tr> <tr> <td>2008-4-1</td> <td>book place @dhgu</td> <td>-40</td> <td>-80</td> </tr> </tbody> </table>
3. 添加jQuery代碼,啟用html表格排序:
在body中對在第二步中指定的排序表格css類調(diào)用tablesorter()函數(shù):
<body> <script type="text/javascript"> $(document).ready(function() { $(".sort-table").tablesorter(); }); </script>
通過上面的3步,jQuery tablesort就可以實現(xiàn)對html表格的排序。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
z-blog SyntaxHighlighter 長代碼無法換行解決辦法(jquery)
由于我的博客主要是代碼分享,很多貼的代碼,都很長。很多時候我都是手動給他換行。但是今天實在是受不了。從網(wǎng)上找個辦法解決一下2014-11-11jQuery實現(xiàn)為LI列表前3行設(shè)置樣式的方法【2種方法】
這篇文章主要介紹了jQuery實現(xiàn)為LI列表前3行設(shè)置樣式的方法,結(jié)合實例形式分析了css控制及jQuery元素獲取2種實現(xiàn)方法,需要的朋友可以參考下2016-09-09基于JQuery和原生JavaScript實現(xiàn)網(wǎng)頁定位導(dǎo)航特效
本文通過實例代碼給大家介紹了基于JQuery和原生JavaScript實現(xiàn)網(wǎng)頁定位導(dǎo)航特效,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-04-04使用jquery給指定的table動態(tài)添加一行、刪除一行
今天在項目中,剛好用到給指定的table添加一行、刪除一行,就直接找google,搜出來的東西不盡如人意,不是功能不好就是千篇一律,簡直浪費時間還不討好,于是乎就自己動手封裝個,現(xiàn)就把代碼分享出來,避免大伙重復(fù)造輪子,如有問題歡迎大伙拍磚指正,千萬可別人身攻擊2016-10-10基于jquery的手風(fēng)琴圖片展示效果實現(xiàn)方法
這篇文章主要介紹了基于jquery的手風(fēng)琴圖片展示效果實現(xiàn)方法,涉及jQuery基于事件實現(xiàn)改變css樣式的方法,非常具有實用價值,需要的朋友可以參考下2014-12-12