DataTables の使い方2『ページ送りとスクロール』

2018年3月23日Java Script

datatables 使い方2アイキャッチ

前回の DataTables の使い方1 では、日本語化まで行いました。

今回は、より大きなテーブルを用いる時に発生するページング(ページ送り)とスクロール機能の使ってみます。

DataTables のページングとスクロール

Datatables のデフォルト状態では、表は10行ごとに分割され、11件目からは次ページに表示されるようになります。

これをページング(ページ送り)といいます。

datatables paging

ページ送りを有効にしていると、閲覧者が1ページに表示させる件数をプルダウンメニューから変更することができます。デフォルトでは10, 25, 50, 100 と大雑把ですが、設定でこの件数を細かく指定することができます。

 

また、ページ送りを利用せず連続したデータを表示させる方法として、スクロール機能も用意されています。スクロール機能を有効にすると利用者が表示件数を指定できなくなりますが、表をコンパクトにしたい時には重宝します。

準備

前回と同じく、 datatables のスクリプトとCSSを head 内に設置します。スクリプトは body 最後でも構いませんが、順序には気を付けてください。

<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>
サンプルテーブルは前回より多い20件にしています。

サンプルテーブルHTML
<table id="myTable">
<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>
もっと大きな表で試したいならこちらからコピペして、テーブル id を変更して使ってください。

DataTables ページング(ページ送り)

ページ送りオプションでは、初期の件数とプルダウンメニューの数字を変更することができます。

オプションデフォルト値〔例〕
ページ送りpagingtrue
デフォルト件数pageLength10
ページメニューlengthMenu[10, 25, 50,100]
キャプション付lengthMenu〔[[7, 10, 15,-1], [7, 10, 15, “全件"]] (-1で全件)〕

今回は初期の表示件数を7件、ページ件数メニューを 『7, 10, 15, 全件』 にします。
ページ件数メニューにはキャプションをつけることができ、[[件数],[キャプション]]の形で記述します。
lengthMenu を -1 にすると全件表示となります。

lengthMenu に pageLength と一致する数値がないと、ページあたりの表示数が空白になるので注意が必要です。

コード

<script>
jQuery(function($){
 $.extend( $.fn.dataTable.defaults, {
 language: {
 url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
 }
 });
$('#myTable').DataTable({
paging: true,//デフォルトでtrueなのでなくてもOK
pageLength: 7,//初期表示件数
lengthMenu: [ [7, 10, 15,-1], [7, 10, 15, "全件"]],//表示件数メニュー
});
});
</script>
コピペするだけで、下の結果になっていると思います。

結果

出生率合計特殊出生率出生数
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 でスクロール

縦方向のスクロールを使うには paging は切り、 scrollY で表の高さを指定します。scrollY では px や vh(view port height) など、通常のサイズを使用できます。

この状態では表の高さが固定されるため、指定した高さを満たすだけの十分な件数がない時はシマシマ模様で埋められます。scrollCollapse を用いると、件数が少ない時にはスクロールバーを出さず、高さをフィットさせることができます。

オプションデフォルト値
ページングpagingtrue
Y方向スクロールscrollYfalse
件数が少ない時scrollCollapsefalse

 

scrollCollapse は表がある程度大きければ必要ありませんが、画面サイズによって指定した高さに収まることがあるため true にしておくほうが無難です。

スクロールテーブルサンプルコード

<script>
jQuery(function($){
 $.extend( $.fn.dataTable.defaults, {
 language: {
 url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
 }
 });
$('#myTable').DataTable({
paging: false,
scrollY:"35vh",
scrollCollapse: true,
});
});
</script>
実行結果

出生率合計特殊出生率出生数
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