網頁在顯示表格時,通常都會希望針對欄位做排序的功能

這時候就可以使用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名稱即可

Categories: jQuery