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

Java Script

datatables logo

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

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

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

 

初期設定

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> もきちんと書いておきます。

  1. Table タグには id をつける
  2. データ部には<tbody></tbody>を必ずつける
  3. DataTablesの css は表の前に置く
  4. 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>を入れる

テーブルサンプル

出生率合計特殊出生率出生数
19979.51.391191665
19989.61.381203147
19999.41.341177669
20009.51.361190547
20019.31.331170662
20029.21.321153855
20038.91.291123610
20048.81.291110721
20058.41.261062530
20068.71.321092674
20078.61.341089818
20088.71.371091156
20098.51.371070035
20108.51.391071304
20118.31.391050806
20128.21.411037231
20138.21.431029816
20148.01.421003539
20158.01.451005677
20167.81.44976978

実際に適用

最後に 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 の最後にでもつけ加えれば完成です。

出生率合計特殊出生率出生数
19979.51.391191665
19989.61.381203147
19999.41.341177669
20009.51.361190547
20019.31.331170662
20029.21.321153855
20038.91.291123610
20048.81.291110721
20058.41.261062530
20068.71.321092674
20078.61.341089818
20088.71.371091156
20098.51.371070035
20108.51.391071304
20118.31.391050806
20128.21.411037231
20138.21.431029816
20148.01.421003539
20158.01.451005677
20167.81.44976978

 

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 と組み合わせることで、特定の列だけ並べ替え対象に指定できる。