Datatables コピペでOK、スクロールするテーブルを簡単設置

2018年5月5日2018年6月8日Java Script

Datatables の設置手順と、コピペですぐ使えるコードです。HTMLで書かれたテーブルさえあれば、すぐに使えます。

年を降順に並べ替え
レコード件数を非表示
ページ送りオフ
表の高さ35vhでスクロール
セルの内容をセンタリング（中寄せ）

このページのコピペ用サンプルでは、上の５つの項目をテーブルに適用します。

1. 初期設定
- 1.1. DataTables のサイトから、必要な script と css を取得
2. Table の書き方
- 2.1. サンプル
3. 実際に適用
4. DataTables script部の簡単な解説

初期設定

Datatables を利用するには jQuery が必要になります。
Wordpress ならデフォルトの jQuery で使えるのでそのままでOK。

jQuery を使用していないサイトなら別途用意するか、Datatables のダウンロードの際に「Step 2. Select packages」でjQueryも加えます。

DataTables のサイトから、必要な script と css を取得

必要なファイルはダウンロードしてローカルに置くこともできますが、ここではCDN（ネット経由）から読み込む方法で設置します。

ダウンロード DataTables

Datatablesはさまざまな機能拡張（Extensions）があるので、必要なものだけを選びます。

今回はよく使うボタンとスクローラーの機能拡張を取得します。

Step 1. Choose a styling framework

DataTables

Step 2. Select packages

DataTables

Extensions

Buttons
Scroller

選び終えたら CDN に表示されているCSSとScriptをコピーして、表を作成するページに貼りつけます。

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

失敗をなくすために、最初は<head>内に貼り付けるのが無難です。

Table の書き方

DataTablesを適用させたいテーブルにはユニーク（一意で決まる）なidをつけて、scriptで操作します。

データ部分には、明示的に<tbody></tbody>をつけ加えます。
tbody はあまり馴染みがありませんが、DataTables を使う際には必須となります。

ヘッダー <thead> やフッター <tfoot> もきちんと書いておきます。

Table タグには id をつける
データ部には<tbody></tbody>を必ずつける
DataTablesの css は表の前に置く
Datatables のスクリプトはjQueryの後に置く

サンプル

サンプル用スタイル class="datatables"

<style>
.datatables{width:100%;}
.datatables thead th{font-size:14px;padding:2px 4px;}
.datatables th{background:#ACBAD4;}
.datatables tbody td{padding:1px 2px;}
</style>

サンプルテーブル

HTML

<table id="table1" class="datatables">
<thead>
<tr>
<th>年</th>
<th>出生率</th>
<th>合計特殊出生率</th>
<th>出生数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1997</td>
<td>9.5</td>
<td>1.39</td>
<td>1191665</td>
</tr>
<tr>
<td>1998</td>
<td>9.6</td>
<td>1.38</td>
<td>1203147</td>
</tr>
<tr>
<td>1999</td>
<td>9.4</td>
<td>1.34</td>
<td>1177669</td>
</tr>
<tr>
<td>2000</td>
<td>9.5</td>
<td>1.36</td>
<td>1190547</td>
</tr>
<tr>
<td>2001</td>
<td>9.3</td>
<td>1.33</td>
<td>1170662</td>
</tr>
<tr>
<td>2002</td>
<td>9.2</td>
<td>1.32</td>
<td>1153855</td>
</tr>
<tr>
<td>2003</td>
<td>8.9</td>
<td>1.29</td>
<td>1123610</td>
</tr>
<tr>
<td>2004</td>
<td>8.8</td>
<td>1.29</td>
<td>1110721</td>
</tr>
<tr>
<td>2005</td>
<td>8.4</td>
<td>1.26</td>
<td>1062530</td>
</tr>
<tr>
<td>2006</td>
<td>8.7</td>
<td>1.32</td>
<td>1092674</td>
</tr>
<tr>
<td>2007</td>
<td>8.6</td>
<td>1.34</td>
<td>1089818</td>
</tr>
<tr>
<td>2008</td>
<td>8.7</td>
<td>1.37</td>
<td>1091156</td>
</tr>
<tr>
<td>2009</td>
<td>8.5</td>
<td>1.37</td>
<td>1070035</td>
</tr>
<tr>
<td>2010</td>
<td>8.5</td>
<td>1.39</td>
<td>1071304</td>
</tr>
<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>

<table id="table1″>//サンプルとしてtable1というidをつける
データ部の先頭には tbody を入れる
</table> の前に </tbody>を入れる

テーブルサンプル

年	出生率	合計特殊出生率	出生数
1997	9.5	1.39	1191665
1998	9.6	1.38	1203147
1999	9.4	1.34	1177669
2000	9.5	1.36	1190547
2001	9.3	1.33	1170662
2002	9.2	1.32	1153855
2003	8.9	1.29	1123610
2004	8.8	1.29	1110721
2005	8.4	1.26	1062530
2006	8.7	1.32	1092674
2007	8.6	1.34	1089818
2008	8.7	1.37	1091156
2009	8.5	1.37	1070035
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

実際に適用

最後に script を作成します。

今回は　年を降順に並べ替え、レコード件数を非表示、ページ送りオフ、表の高さ35vhでスクロールさせる、セルの内容をセンタリング（中寄せ）　にして表示させてみます。

datatables用スクリプト

<script>
jQuery(function($){
var mytable1=$('#table1').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": "最終"
 }
},
order: [ 0, 'dec' ],
autoWidth:true,
paging: false,
info: false,
lengthMenu : false,
responsive : false,
scrollY:"35vh",
scrollCollapse: false,
columnDefs :[{targets:'_all',className : 'dt-body-center'},{targets:[2,3],sortable:false},],
});
});
</script>

上のスクリプトを body の最後にでもつけ加えれば完成です。

年	出生率	合計特殊出生率	出生数
1997	9.5	1.39	1191665
1998	9.6	1.38	1203147
1999	9.4	1.34	1177669
2000	9.5	1.36	1190547
2001	9.3	1.33	1170662
2002	9.2	1.32	1153855
2003	8.9	1.29	1123610
2004	8.8	1.29	1110721
2005	8.4	1.26	1062530
2006	8.7	1.32	1092674
2007	8.6	1.34	1089818
2008	8.7	1.37	1091156
2009	8.5	1.37	1070035
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部の簡単な解説

上のスクリプトでは、APIを使える書き方にしてあります。
一般的な書き方としては var = mytable1 の部分がない dataTable（先頭のDが小文字）で解説されていることが多いですが、普通の使い方ならどちらでも動きます。

一般的な書き方

$('#table1').dataTable({});

$('#table1')　赤字の部分がCSSセレクタで、対応するIDをもつテーブルにスクリプトが適用されます。

複数のテーブルに別のルールを適用したい時は、それぞれのテーブルにidをつけて、スクリプトも別々に記述していきます。

表の幅を調整する

表の幅は autoWidth ではページによってはうまく取得できないことがあるので、公式ではcss かtable width="100%" での調整が推奨されています。

プロパティ

ページ送り
paging: true か false

true にすると、1ページ目、2ページ目といったページ送りができるようになります。

1ページあたりの件数は pageLength:数字で調整します。

スクロールバーを使う
scrollY:"35vh"

縦方向の高さを制限してスクローラーを表示させます。scrollY をつけなければ表全体が表示されます。
ページ送りをするならこれは消しておきます。

上のスクリプトでは 35vh(viewport height:モニターの35%の高さ)にしていますが、px など他の単位でも指定可能です。

列の定義　columnDefs

columnDefs を使うと複数の列にプロパティを適用させることができます。
列の番号は0から始まり、左から0,1,2と数が増え、4列の表なら一番右が3となります。

columnDefs :[{targets:'_all',className : 'dt-body-center'},{targets:[2,3],sortable:false}]

targets:'_all'ならすべての列に、targets:[0,1]なら0番目と1番目の列に適用されます。

センタリング（クラスで行う）

dt-body-center（tbodyに適用)
dt-head-center（theadに適用）

右寄せ・左寄せ

centerの部分を right left に書き換える。

並べ替え sortable

sortable: true または false

columnDefs と組み合わせることで、特定の列だけ並べ替え対象に指定できる。

Java Script

ディスカッション

コメント一覧

まだ、コメントがありません

コメントをどうぞコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。