今回は、サイト運営に関する話です。
ランキングの一覧表を作ろうと思い、データをまとめていたんですが
その表がソート出来ないかなと思い調べていた所、良い物が見つかりました。
javascriptを使ってテーブルをソートするもので、
jQuery プラグイン Tablesorter 2.0というものです。
これは、2つのファイルを読み込ませる事で可能となります。
さらに、オプションもあり、かなり自由自在になります。
jQuery の本体と Tablesorter をダウンロードし展開しておきます。
jquery.min.js、jquery.tablesorter.min.js の2つのファイルのみ必要になります。
テーブルのCSSも必要なので、jquery/style.cssも入れておきます。
あとは、適当なフォルダにこの3つのファイルをアップロードします。
（私は、「jquery」フォルダを作り、そこに3つのファイルを入れました）
jquery/style.css
jquery/jquery.min.js
jquery/jquery.tablesorter.min.js
<head>内にこのファイルを読み込ませる為、以下を記述します。
<link rel="stylesheet" href="http://kousien.info/modules/pico/jquery/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://kousien.info/modules/pico/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://kousien.info/modules/pico/jquery/jquery.tablesorter.min.js"></script> |
ソート可能にするコードを追加する為に以下を記述します。
$(document).ready(function() {
$("#maintable").tablesorter();
} |
#maintableは、<table id="maintable"～などと使います。
「#maintable」を「table」にすると、そのページの全てのテーブルがソート可能となります。
次にテーブルをソート可能にする為、テーブルタグに記述します。
<table id="maintable"、class="tablesorter" とします。
次にthead 、 tbody を入れます。合わせると以下のようになります。
<table id="maintable" class="tablesorter">
<thead>
<tr><th>順位</th><th>点数</th></tr>
</thead>
<tbody>
<tr><td>1位</td><td>100</td></tr>
<tr><td>2位</td><td>80</td></tr>
<tr><td>3位</td><td>90</td></tr>
</tbody>
</table> |
これのみでテーブルソート可能となります。
結構、軽いのでかなり重宝しそうです。
オプション（というのか？）は様々なものがあり、自分が使ったものは
テーブル内の行ごとに色を変える（ソート可能にするコードを追加するの部分に追加）
| $.tablesorter.defaults.widgets = ['zebra']; |
あと、一番導入したいと思ったのは、<th>を繰り返し表示するものです。
<th>には、だいたい表の重要な部分に関する事を書きますが、
下に長いと一番上にある<th>部分が見えなくなってしまう事があります。
これを解消するように、何行ごとに<th>部分を繰り返すかを設定出来るオプションもあります。
これは、Tablesorterの配布サイトのサンプルでありました。
これらを使ったページが、ここにあります。（私のサイト）
テーブルの上の部分をクリックするだけでソートします。
こんな感じでやってます。
