DataTables の使い方 1 スクリプトの設置と基本の使い方

2018年3月17日2018年8月8日Java Script

DataTables （データテーブルズ）の設置から日本語化までの解説です。
作成済みのテーブル（表）に id を付け足して、日本語でのページ送りとソートができるようにします。

jsonや二次元配列データからの読み込みもできますが、まずはHTMLで書かれたテーブルからインタラクティブな表の作成からはじめます。

DataTables を動かすには jQuery が必要です。導入されていない場合はこちらからダウンロードするか、CDNから入手してください（Wordpressを使っているなら不要）。

<script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>

1. DataTables の初期設定（設置）
- 1.1. CDN
- 1.2. ダウンロードしてサーバに置く
2. テーブルの準備
- 2.1. DataTables で必要な要素
3. DataTablesの基本スクリプト
4. 日本語化
5. まとめ

DataTables の初期設定（設置）

DataTablesを使うには、ブラウザにスクリプトを読み込ませる必要があります。

CDNとダウンロード、いずれも同じように使えます。
今回つかうのは基本機能だけなのでオプションは無視して下の『Step 3. Pick a download method』に移動し、CDNかDownloadを選びます。

DownloadDataTables ダウンロードページ

※jQuery の設置の仕方が分からない方は、Step 2. Select Packages で jQuery3 を追加してください

CDN

最新版でなくてもよければ↓を <head> と </head> の下の方につけ加えてください。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

ダウンロードしてサーバに置く

Datatables はダウンロードして、自分のサーバに置くこともできます。

ダウンロードは一番下の 3. pick a download method で Download タブを選んで、下に表示されている Download files から行います。

Minify と Concatenate （連結）にチェックを入れてダウンロードすると DataTables.zip というファイルができるので、解凍してサーバに設置します。

使用するファイルは二つ。

datatables.min.js
datatables.min.css

この二つのファイルをサーバの好きなところに置きます。/js/datatables/ というフォルダを作れば分かりやすくなります。

最後にサーバに置いたファイルを<head> </head>で読み込ませます（body でも動きます）。

<link rel="stylesheet" type="text/css" href="/js/datatables/datatables.min.css"/>
<script type="text/javascript" src="/js/datatables/datatables.min.js"></script>

これで jQuery を使う準備が整いました。あとは実際のテーブルに適用するだけです。

テーブルの準備

すでにテーブルが作成済みなら、そのテーブルを使ってください。
テーブルがまだない方はサンプルテーブルをコピペしてご利用ください。

サンプルテーブルHTML

<table id="table1" class="datatables">
<thead>
<tr>
<th>年</th>
<th>出生率</th>
<th>合計特殊出生率</th>
<th>出生数</th>
</tr>
</thead>
<tbody>
<tr>
<td>2011</td>
<td>8.3</td>
<td>1.39</td>
<td>1050806</td>
</tr>
<tr>
<td>2012</td>
<td>8.2</td>
<td>1.41</td>
<td>1037231</td>
</tr>
<tr>
<td>2013</td>
<td>8.2</td>
<td>1.43</td>
<td>1029816</td>
</tr>
<tr>
<td>2014</td>
<td>8.0</td>
<td>1.42</td>
<td>1003539</td>
</tr>
<tr>
<td>2015</td>
<td>8.0</td>
<td>1.45</td>
<td>1005677</td>
</tr>
<tr>
<td>2016</td>
<td>7.8</td>
<td>1.44</td>
<td>976978</td>
</tr>
</tbody>
</table>

DataTables で必要な要素

DataTables でインタラクティブな表を作成するには、ユニーク（一意に決まる）テーブル id と <thead>・<tbody>の二つの要素が必須となります。

■テーブル id

CSSセレクタとして使われる普通のIDです。DataTables のスクリプトの対象を id を指定するのに利用します。
今回は <table id="myTable">としてください

■<thead> ～ </thead>

DataTables では並べ替えを行うために thead を利用するため、列のタイトルを入れるのが一般的です。

table 要素は、
<table>
<thead><tr>列タイトル～</tr></thead>
<tbody><tr>表のデータ部分～</tr></tbody>
<tfoot><tr>合計や注釈～</tr></tfoot>
</table>
という形になります。

datatables では thead と tbody は必須です。tfoot は必要がなければ書く必要はありません。

※列タイトルもデータもスクリプトで付け加えることができるので、必ずしもHTMLで書く必要はありません。しかしここではHTMLで書かれたテーブルを用いるので、つけるようにしてください。

■<tbody></tbody>

tbody 内のデータが並べ替えや検索の対象となります。DataTablesを使う際は、必ず<tbody> ～ </tbody>をつけてください。

DataTablesの基本スクリプト

jQuery で書きます。

この形が基本。

<script>
$(document).ready(function ($) {
 $('#myTable').DataTable();
});
</script>

上のスクリプトを実行すると、表の上に検索ボックスや情報が表示されているはずです。

年	出生率	合計特殊出生率	出生数
2010	8.5	1.39	1071304
2011	8.3	1.39	1050806
2012	8.2	1.41	1037231
2013	8.2	1.43	1029816
2014	8.0	1.42	1003539
2015	8.0	1.45	1005677
2016	7.8	1.44	976978

表示が英語では困るので日本語化します。

日本語化

日本語化には二通りの方法があります。

好きな表現を使いたいなら自分で、そうでなければ初期設定を変更して公式の日本語ファイルを用いるほうがスッキリして分かりやすいでしょう。

DataTables の公式で配布されているファイルを使う

デフォルト設定を利用してデータテーブルの日本語化プラグインを適用します。

<script>
jQuery(function($){
$.extend( $.fn.dataTable.defaults, {
language: {
url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
}
});
$('#myTable').DataTable();
});
</script>

自分で設定する

言語オプションを自分で変更します。

<script>
jQuery(function ($){
$('#myTable').DataTable({
language: {
 "decimal": ".",
 "thousands": ",",
 "sProcessing": "処理中...",
 "sLengthMenu": "_MENU_ 件表示",
 "sZeroRecords": "データはありません。",
 "sInfo": " _TOTAL_ 件中 _START_ から _END_ まで表示",
 "sInfoEmpty": " 0 件中 0 から 0 まで表示",
 "sInfoFiltered": "（全 _MAX_ 件より抽出）",
 "sInfoPostFix": "",
 "sSearch": "検索:",
 "sUrl": "",
 "oPaginate": {
 "sFirst": "先頭",
 "sPrevious": "前",
 "sNext": "次",
 "sLast": "最終"
 }
},
});
});
</script>