DataTables の使い方2『ページ送りとスクロール』
前回の DataTables の使い方1 では、日本語化まで行いました。
今回は、より大きなテーブルを用いる時に発生するページング(ページ送り)とスクロール機能の使ってみます。
DataTables のページングとスクロール
Datatables のデフォルト状態では、表は10行ごとに分割され、11件目からは次ページに表示されるようになります。
これをページング(ページ送り)といいます。
ページ送りを有効にしていると、閲覧者が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件にしています。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 にすると全件表示となります。
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>
コピペするだけで、下の結果になっていると思います。結果
年 | 出生率 | 合計特殊出生率 | 出生数 |
---|---|---|---|
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 |
ディスカッション
コメント一覧
まだ、コメントがありません