網頁在顯示表格時,通常都會希望針對欄位做排序的功能
這時候就可以使用Tablesorter
在使用上,HTML格式需要配合特定的格式才可以正常使用
HTML:
<!-- 若有使用Tablesorter提供的樣版,就必須會table元素加上class才能套用樣版 --> <table id="test_table" class="tablesorter"> <thead> <tr> <th>姓名</th> <th>生日</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>2011.01.01</td> </tr> <tr> <td>李四</td> <td>2012.05.06</td> </tr> <tr> <td>王五</td> <td>2012.06.05</td> </tr> </tbody> </table>
引入的javascript:
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- Tablesorter --> <script type="text/javascript" src="jquery-latest.js"></script> <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
jQuery:
$(document).ready(function(){ $("#test_table").tablesorter(); //參數部份請參考官網 });
官方有提供兩種顏色的樣版,如果要使用,只要引入樣版資料夾中的css,再把table元素加上tablesorter的class名稱即可