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

2018年3月23日2018年7月29日Java Script

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

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

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

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

これをページング（ページ送り）といいます。

ページ送りを有効にしていると、閲覧者が１ページに表示させる件数をプルダウンメニューから変更することができます。デフォルトでは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>

<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>

DataTables ページング（ページ送り）

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

今回は初期の表示件数を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>

結果

ページ送りができたら、次はスクロール。

DataTables でスクロール

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

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

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>