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>