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

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 ページング(ページ送り)

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

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

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

コード

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

コピペするだけで、下の結果になっていると思います。

結果

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

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

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

オプション デフォルト値
ページング paging true
Y方向スクロール scrollY false
件数が少ない時 scrollCollapse false

 

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>

実行結果

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