print 'Hello World!';

hogehoge備忘録

jQueryプラグイン Tablesorter#テーブルの行を並び替える

jQueryプラグイン「Tablesorter」を使えば、簡単にソート機能が追加できる。

GitHub - christianbach/tablesorter: Flexible client-side table sortingからjquery.tablesorter.min.jsファイルをダウンロードして、jsディレクトリに設置する。

htmlファイル内

<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>

ソートの状況によって、th要素には以下のクラスが付与される

  • 並び替え可能なヘッダーのth要素にはheaderクラスが付与される
  • 昇順に並び替えると、その列のth要素にはheaderSortDownクラスが付与される
  • 降順に並び替えると、その列のth要素にはheaderSortUpクラスが付与される

#サンプルコード

jsファイル

$(function(){

	//テーブルソート
	$('#prefTable').tablesorter({
			// 1行間隔で行の背景色を変更する
			// tr要素のクラスにevenとodd が交互に付与される
			widgets:['zebra'],
			// ソート初期条件[(列番号 一番左の列が0),(昇順:0 降順:1)]で指定
			sortList:0,1,
			// 指定列のソート無効化
			// 列番号で列を指定して、sorter:falseで無効化
			headers:{
				3:{sorter:false}
			}
	});
});

htmlファイル

<html>
<head>
<title>Laravel</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapi.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/form.js"></script>
<style>
<!--

#prefTable th,#prefTable td{
    padding: 3px 18px;
}

#prefTable th{
    text-align: left;
}

#prefTable tr.odd td {
    background-color:#f0f0f6;
}

#prefTable th.header {
	background: url('/images/bg.gif') right center no-repeat;
}

#prefTable th.headerSortUp {
	background: url('/images/asc.gif') right center no-repeat;
}
#prefTable th.headerSortDown {
	background: url('/images/desc.gif') right center no-repeat;
}

-->
</style>
</head>
<body>

<table id="prefTable">

<thead>
<tr>
<th>#</th>
<th>都道府県</th>
<th>フリガナ</th>
<th>ふりがな</th>
<th>ローマ字</th>
</tr>
</thead>
<tbody>
<tr>
<td>08</td>
<td>茨城県</td>
<td>イバラキケン</td>
<td>いばらきけん</td>
<td>ibaraki</td>
</tr>
<tr>
<td>09</td>
<td>栃木県</td>
<td>トチギケン</td>
<td>とちぎけん</td>
<td>tochigi</td>
</tr>
<tr>
<td>10</td>
<td>群馬県</td>
<td>グンマケン</td>
<td>ぐんまけん</td>
<td>gunma</td>
</tr>
</table>

</body>
</html>