8ヶ月前に投稿

DataTables の Scroll Resize plug-inを使ってみた

この記事は約 4 分で読めます。

4.5

ご紹介する
DataTables のプラグイン、
Scroll Resize plug-in は、

2015年に導入した
Page Resize plug-in
の後継バージョンです。

Page Resize plug-in は
テーブルのページ長を動的に変更して、
コンテナー内に収まるようにする
機能を提供します。
これは、ページングが有効で
スクロールが無効
な場合に機能します。

Scroll Resize plug-in は
スクロールが有効でも
非常に自然に機能します。

DataTablesで
Scroll Resize plug-inを
使用するには、ページに
plug-inのJavascriptを含めます。

<script src="https://cdn.datatables.net/plug-ins/1.10.20/features/scrollResize/dataTables.scrollResize.min.js"></script>

次に DataTableの初期化で
scrollResize optionを指定し、
scrollY optionを有効にすることで
機能を有効にします。

$('#myTable').DataTable( {
scrollResize: true,
scrollY: 100,
scrollCollapse: true,
paging: false
} );

ScrollResizeを使用する場合、
通常は paging: false にすることに
注意してください。

以下の例は
ScrollResize に
Buttons extension
caption element
追加したものとなります。

ルナの血液検査結果 退院時 検査 (前比) 再検査 (前比) 今検査 (前比) 正常域
RBC (10⁶/㎕) 4.51 3.82 (⤵) 3.50 (⤵) 4.33 (⤴) 5.50-8.50
Hgb (g/dL) 6.7 5.4 (⤵) 5.1 (⤵) 6.6 (⤴) 10-15
Hct (L%) 22.0 17.5 (⤵) 16.3 (⤵) 20.0 (⤴) 32-40
BUN-PS (mg/dl) 48.4 52.1 (⤴) 56.0 (⤴) 52.1 (⤵) 17.0-35.0
CRE-PS (mg/dl) 2.87 3.55 (⤴) 2.80 (⤵) 2.42 (⤵) 0.8-1.8
IP-PS (mg/dl) 5.0 4.3 (⤵) 3.0 (⤵) 3.5 (⤴) 2.7-6.4
ルナの血液検査結果 退院時 検査 (前比) 再検査 (前比) 今検査 (前比) 正常域
Click and drag me!

この記事に表示されている
DataTables の html コードは
GitHub のこちらです。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
DataTables の Scroll Resize plug-inを使ってみた