「DataTables」を使えば5行でできる
JavaScriptだけで表＜table＞を並び替え！
2009年04月15日 08時00分更新
DataTablesの基本的な使い方
DataTablesを使って表に並び替えなどの機能を追加するには、以下の手順を取ります。
●HTMLのヘッダー部分の書き換え
まず、DataTablesのスタイルシートとJavaScriptを読み込むため、HTMLのヘッダー部分にstyleタグとscriptタグを追加します。
<style type="text/css" title="currentStyle">
@import "media/css/demos.css";
</style>
<script type="text/javascript" language="javascript" src="http://アップロード先/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="http://アップロード先/media/js/jquery.dataTables.js"></script>
●table要素の書き方
次に、表（table要素）をマークアップします。DataTablesを使うには、見出しの行をthead要素で囲み、データの行をtbody要素で囲みます。見出しの行はセルをth要素で表しましょう。また、table要素にはIDを振り、「class="display"」を指定します。以下に、簡単なサンプルを示します。
<table id="表のID" class="display">
<thead>
<tr><th>見出し</th><th>見出し</th>・・・<th>見出し</th></tr>
</thead>
<tbody>
<tr><td>値</td><td>値</td>・・・<td>値</td></tr>
<tr><td>値</td><td>値</td>・・・<td>値</td></tr>
・・・
<tr><td>値</td><td>値</td>・・・<td>値</td></tr>
</tbody>
</table>
●DataTablesのJavaScriptを実行する
最後に、HTMLのヘッダー部分などに以下のようなscriptタグを追加し、ページの読み込みが終わった時点でDataTableのJavaScriptを実行させます。「表のID」の部分には、table要素のID属性に指定した値を入れてください。
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#表のID').dataTable();
});
</script>
ここまでの作業が終わったら、ブラウザーでページを開いて確認してみましょう。以下の画面のように、表に書式が設定され、見出し行の各列の右端に並び替え用のボタンが表示されます。ボタンをクリックするごとに昇順と降順が入れ替われば成功です。
 |
|---|
| 番号の逆順に並べ替えた例 |
複数の列をキーにした並び替えもできます。その場合、1列目の並び替えボタンをクリックした後、2列名以降ではShiftキーを押しながらクリックします。
たとえば、上のサンプルの画面で「年齢が同じ人は、名前のあいうえお順に並べ替える」という場合には、まず年齢列の並べ替えボタンをクリックし、次にShiftキーを押しながらふりがな列の並び替えボタンをクリックします。
 |
|---|
| 年齢とふりがなをキーに並び替えた例 |
カスタマイズもできるDataTables
DataTablesは非常に多機能なJavaScriptで、パラメータでカスタマイズしたり、プラグインを追加して複雑なカスタマイズができます。たとえば、設定した件数に基づいて表を自動的に分割表示したり、キーワードによる表の絞り込みもできます。
詳しいカスタマイズ方法は、DataTablesのサイトを参照してください。また、DataTablesのZipファイルには多数のサンプルファイルが含まれているので、それも参考になるでしょう。
