DataTables 超入門

Java ScriptJava Script

datatables logo

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

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

コピペ用Datatables を使ってコピペで動的なテーブルを作成

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

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

ダウンロードと設置

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

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

ダウンロード DataTables

 

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

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

  1. jQuery
  2. datatables.min.js
  3. 実行スクリプト

 

テーブルの型

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

  • テーブルにはIDをつける。このIDを対象としてスクリプトを実行させる<table id=”table1″>
  • 一番上の行の列タイトルは<thead></thead>に入れる
  • データ部の先頭には <tbody> を入れる
  • </table> の前に </tbody>を入れる
  • 必要なら foot も使える

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

 

Datatables の基本デザイン・スタイリング

関連Datatables のデザイン・スタイリング

 

オプション

ページ送り・スクロール

オプション デフォルト値【設定方法】
ページ送り 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 } ],