DataTablesの使い方

DataTablesとは

DataTablesは、表を綺麗に見せるだけでなく、ABC順などでソートしたり、単語にマッチした行だけ表示する検索などの機能を持ったプラグインです。

以下の例では、左上のShow部分の数字を変更することで、一度に表示する行数を変更できます。また、ヘッダー部分をクリックするとその列の昇順、もう1度クリックすると降順にソートします。Search部分に文字を入力すると、マッチした行だけ表示されます。

DataTablesは、MIT Lisenceというライセンスを採用していて、自由にダウンロードして無料で利用できます。

DataTablesのダウンロードと導入

DataTablesは、「DataTables」でダウンロードできます。表示されたページで、「Download」を選択するとオプションなどが選択できるページになりますが、オプションは選択しなくても動作します。

ページの一番下で、さらに「Download」をクリックした後、「Download files」をクリックするとファイルがダウンロードできます。

ダウンロードしたファイルは、圧縮されているため解凍が必要です。解凍後は、DataTablesフォルダができるため、フォルダごとサーバーにアップロードします。

アップロードした後、「jQueryの利用」でプラグインを利用できるようになっている場合は、HTMLのhead要素内に以下の記述を追加してファイルを読み込ませます。

<link rel="stylesheet" href="DataTables/datatables.min.css">
<script src="DataTables/datatables.min.js"></script>
<script>
$(document).ready(function(){
  $('#myTable').DataTable();
});
</script>

赤字部分は、アップロードしたDataTablesのCSSファイルとJavaScriptです。ディレクトリを作ってアップロードした場合は、アップロードしたディレクトリに合わせて修正してください。

その下は、DataTablesを使うための最低限のスクリプトです。

HTMLのbody内で、以下のように表を挿入すると、記述した部分に表が表示されます。

<table class="display" id="myTable">
<thead>
  <tr>
    <th>会社</th>
    <th>商品</th>
    <th>価格</th>
    <th>送料</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>A社</td>
    <td>テント</td>
    <td>20,000</td>
    <td>5,000</td>
  </tr>
・・・以下同じ
</tbody>
</table>

表の作り方については、「HTMLに表を挿入して装飾する」をご参照下さい。

DataTablesのオプション

以下のようにデータをすべて表示し、左上の行数変更、右下の「Next」や「Previous」、左下の何ページ目かなどのインフォメーション表示を無効にすることもできます。

指定は、オプションで行います。以下は、オプションの例です。

オプションは、スクリプトに追加して記述します。複数オプションを指定する場合は、カンマ(,)で区切って記述します。例で示した表では、以下赤字部分のようにオプションを追加しています。

<script>
$(document).ready(function(){
    $('#myTable').dataTable( {
        paging: false,
        lengthChange: false,
        searching: true,
        ordering: true,
        info: false
	} );
} );
</script>

ソートや検索は有効にし、ページ切替が不要なように全データを表示するようにしています。また、左下に表示される何ページ目かなどのインフォメーションも無効にしています。

orderは、以下のように[[1, 'asc']]と指定すると2列目をソートして初期表示します。

<script>
$(document).ready(function(){
    $('#myTable').dataTable( {
        order: [[1, 'asc']]
	} );
} );
</script>

赤字部分は、0が1列目、1が2列目のソートを示します。

デフォルトは、1列目でソートされます。ソートしたくない場合は、order: []と指定します。

複数個所での利用

DataTablesを1ページで2箇所以上で利用する場合、スクリプトを以下赤字部分のように書き換えて追加します。

<script>
$(document).ready(function(){
    $('#myTable2').dataTable( {
        paging: false,
        lengthChange: false,
        searching: false,
        ordering: false,
        info: false
	} );
} );
</script>

上記は、検索やソートなどのオプションも無効にしていますが、利用する機能に合わせて設定を変更してください。

また、2箇所目のtable要素では以下のように記述します。

<table class="display" id="myTable2">

赤字部分を合わせることで、スクリプトと表が対応付けられます。

このため、オプションを変えて1ページ内に異なる動作をする複数の表が作成できます。