DataTables 超入門

2018年3月5日2018年7月1日Java Script

HTMLのtable タグで作った表にソートや検索機能を追加するための jQuery プラグイン DataTables の使い方です。

とりあえず使ってみたい人は、覚え書き＋コピペでそのまま使えるサンプルとして用意したこちらのコードをご利用ください。

微調整のたびに調べるはめになるため、よく使うオプションをまとめて設定してあります。

Datatables のこまかい使い方は下の関連ページをご覧ください。

ダウンロードと設置

Datatables はCDNを利用することもできますが、ダウンロードしてサーバに置くことも可能です。

結合させてダウンロードする場合は、どの Extension を選択したかを把握しておく必要があります。

Datatables を使うには jQuery が必要です。Wordpress を利用しているなら不要ですが、jQuery を設置していない場合は、Datatables と一緒にダウンロードすることもできます。CDNからも利用できます。

設置順は以下の順序にします。

テーブルには head と body が必要です。

基本的には普通のテーブルですが、テーブルの高さを固定させてスクロールさせる場合は、head と foot は固定されます。

	オプション	デフォルト値【設定方法】
ページ送り	paging	true
デフォルト件数	pageLength	10
ページメニュー	lengthMenu	[10, 25, 50,100]
ページキャプション	lengthMenu	設定例 [[7, 10, 15,-1], [7, 10, 15, “全件”]] （-1で全件）
X方向（横方向）スクロール	scrollX	false true か false だけでオプションはありません
Y方向（縦方向）スクロール	scrollY	false 【高さは vh や px で指定】
件数が少ない時（空白にするか）	scrollCollapse	false

	オプション	デフォルト値【設定方法】
サーチオプション	searching	true 【false にするとサーチボックスが消えるだけでなく、サーチ機能そのものがオフになる】
並び替え許可	ordering	true
初期の並び順	order	“order": [] 【[[ 列番号, “desc” or “asc” ]] descで降順ascで昇順】
利用者による並べ替え	orderable	true

ordering がtrue だと、orderを指定していない場合は、一番最初の列が昇順で並び替えられてしまいます。テーブルの順番（データを順）通りに並べるには、“aaSorting":[] とします。

datatables の列に対するオプションの設定には columns と clumnDefs の二通りの方法が用意されています。columns は左から順に設置していくことになるので、列が多いと確認も煩わしくなります。

columnDefs を使うほうが手軽でしょう。列番号は 0 から始まります。

columnDefs: [ {targets: [0, 1], visible: true}, {targets: '_all', visible: false } ],

まだ、コメントがありません

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。