PCゲーム、アニメ紹介 【いけだ屋】
Tableにソート機能などをつけるプラグイン「DataTables」を実装する 2012年5月29日更新
Tableにソート機能などをつけるjQueryのプラグイン「DataTables」の基本的な導入方法と、自分のサイトに合わせて設定したカスタマイズ部分の記述についてのメモ書き。
DataTablesの導入方法
DataTablesのサイトhttp://datatables.net/のダウンロードページからDataTablesのパッケージを入手する（自分の時はバージョン1.9.1が最新版）。
ZIPで圧縮されているので、解凍する。解凍するとフォルダ内にmediaという名前のフォルダがあり、階層の中にはCSSやJavascriptのファイルが格納されている。
基本的に、demo_table.css、jquery.dataTables.js、jquery.jsの3つのファイルを読み込み、テーブル要素を簡単な決まりに従って記述することでDataTablesの機能を使うことができる。
使い方
（ダウンロードしたフォルダやDataTablesのサイトのサンプル例を参考にすると良い）
１．ヘッダー部分でdemo_table.css、jquery.dataTables.js、jquery.jsの3つのファイルを読み込む（styleタグやscriptタグなどを使用する）。
２．ヘッダー部分に以下のように記述し、ページの読み込みが終わった時点でDataTableのJavaScriptを実行させる（#exampleは任意の名前に変えてよい。ただし、Tableのidと同じ名前にする）。
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
３．Table要素を以下のような形で記述する（tableにはidを振り、class="display"を追加する。<thead>と<tbody>の要素で囲むことが重要）。
<table id="example" class="display"> <thead> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> </thead> <tbody> <tr> <td>値</td> <td>値</td> <td>値</td> <td>値</td> <td>値</td> </tr> </tbody> </table>
3つの手順を踏むことでDataTablesの機能を使うことができる。
自分のサイトに合わせて設定したカスタマイズ部分の記述
これまでに蓄積してきたアニメのデータベースについて、曜日順や、名前順、評価順などに並べ替えができるようにDataTablesを実装してみた。 実装例1 実装例2
その際、CSSを変更して、色、デザインの面での変更のほかに、DataTablesのPlug-insを使用して、列ごとに違った並び替え方ができるようにしてみた。ここでは記述方法について簡単に書いておきたい。
CSSについて
Tableの色やデザインについては、demo_table.cssにおいて、table、thead、tr、tdなどの要素名が書かれた箇所に対応する部分があるので、色や境界線などを設定した。
最上段の列にソートをするための三角形のアイコンがあるが、その列については、backgroundで背景色設定するとアイコンの画像が消える。そのため、background-colorで色を設定している。 実装例1 実装例2では、幅の狭い列について意図的にbackgroundを利用してアイコンの画像を消している。
使用したパラメータについて
いくつかのパラメータを使用したので、それらの記述と機能について以下に記しておく。
"bAutoWidth": false セルの横幅が自動的に調整されないようにする。
"bPaginate": false ページ数の表記をしない。
"bLengthChange": false Tableの行数の表示設定を無効にする。
"aaSorting": [] ページ読み込み時には並び替えをしない。
"aoColumns": [{ "sType": "weekdays-sort" }] Week day sortingのソートを特定の列に適用する。
"aoColumns": [{ "sType": "natural" }] Natural sortingのソートを特定の列に適用する
"aoColumns": [{ "asSorting": [ "desc", "asc", "asc" ] }] 特定の列の昇順と降順を入れ替える。
使った小技
<td>値</td>の値の前に<span style="display:none;">1</span>や<span style="display:none;">2</span>などと書いておくと、 同じ値でも、spanタグで囲んだ文字の順番によって並び替えることができる（実装例2の1列目)。
Plug-insについて
詳しい導入方法についてはhttp://datatables.net/に載っているので参考にする。自分のサイトでは、曜日が日・月・火・水・木・金・土などと 順番に並ぶようにするために、Week day sortingというPlug-inと、4月1日など、数字以外の文字が混じった値がうまく並ぶようにするNatural sortingというPlug-inを導入した。
Week day sortingについては、曜日が英語名のものに設定されているので、以下のように日本語名を設定して使用した。
var weekdays = new Array();
weekdays['日曜日'] = 1;
weekdays['月曜日'] = 2;
weekdays['火曜日'] = 3;
weekdays['水曜日'] = 4;
weekdays['木曜日'] = 5;
weekdays['金曜日'] = 6;
weekdays['土曜日'] = 7;
jQuery.fn.dataTableExt.oSort['weekdays-sort-asc'] = function(a,b) {
a = a.toLowerCase();
b = b.toLowerCase();
return ((weekdays[a] < weekdays[b]) ? -1 : ((weekdays[a] > weekdays[b]) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['weekdays-sort-desc'] = function(a,b) {
a = a.toLowerCase();
b = b.toLowerCase();
return ((weekdays[a] < weekdays[b]) ? 1 : ((weekdays[a] > weekdays[b]) ? -1 : 0));
};
曜日以外にも応用すれば様々な値に利用可能。