tablesorterでテーブルの並び替えができるようにする

jqueryのtablesorterでテーブルの列を使って並び替えをできるようにする。昇順と降順に並び変えることができかっこいいテーブルにすることができる。

1.ヘッダー

 

<!– table –>
<script type="text/javascript" src="<?= $this->BasePath ?>/share/js/tablesorter/jquery.tablesorter.js"></script>
<link rel="stylesheet" type="text/css" href="<?= $this->BasePath ?>/share/js/tablesorter/style.css" />
2.スクリプト
<script type="text/javascript">  
$(document).ready(function() { 
$.tablesorter.defaults.widgets = ['zebra'];//行ごとに色変える
//$.tablesorter.defaults.sortList = [[0,0]];//最初にソートする行(ソートなしの設定)
$("table").tablesorter();
});  
</script>
3.テーブル・・・クラスで適応させるテーブルを指定する。
<table class="tablesorter" width="560">
<thead> 
<tr>
<th>検索ワード</th>
<th>google</th>
</tr>
</thead>
<tbody>
<tr>
<td>word</td>
<td>rnk</td>
</tr>
</tbody>
</table>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です