リッチなテーブルを扱う事が出来るjQueryプラグインのDataTables。前回の記事では基本的な導入をする手順を紹介しました。

前回の記事は下記を参照。

jQueryのDataTablesでリッチなテーブルを使おう

今回はDataTablesのエクステンションであるColVis(column visibility)を使ってボタンによる列表示の制御を加える方法を紹介します。

列表示制御

ColVis(column visibility)を使った列表示の制御ボタンを加える方法

サンプルページを用意しました。これを元に解説します。

列制御を加えたサンプルページ

導入手順

まずはColVisを用意しよう。エクステンションとして本家サイトに用意されている。

公式URL:http://datatables.net/index

ダウンロードURL:https://datatables.net/download/index

エクステンション選択

ExtensionsのButtonsを選択する

ColVisを加える

column visibilityを選択すれば必要な機能が入ったファイルをダウンロード出来る

CDNかファイルを選択

CDNかファイルか好みで選ぼう。自動的にPackageの記述を生成してくれる

 

生成されたコードを元にHTMLに記述すれば準備は出来る。

導入方法が分からない人はjQueryのDataTablesでリッチなテーブルを使おうを参照。

ColVisを有効にする

赤字部分がColVisを適用する設定。ここではカラム切替という名前で生成する。

DataTablesのオプション

ざっくりと一般的なものを紹介する。詳しくは公式ページをご覧下さい。

オプション
デフォルト値
説明
bAutoWidth
TRUE
列の幅の自動調整をするかどうか
bFilter
TRUE
フィルタリング機能の有無
bInfo
TRUE
レコード情報表示の有効/無効。現在のページやレコード総数を表示。
bLengthChange
TRUE
表示件数を指定するドロップダウンメニュー表示の有無
bPaginate
TRUE
ページングの有効/無効。
bProcessing
FALSE
処理中表示の有無。
bSort
TRUE
カラムのソートの有効/無効
bStateSave
FALSE
cookieでテーブル表示の状態維持
order
[[0, 'asc']]
初期状態のソート順を指定
lengthMenu
[ 10, 25, 50, 100 ]
表示件数のドロップダウンメニューに表示するメニューを指定
displayLength
10
ページングをしている際のデフォルトの表示件数
oLanguage
-
表示制御要素の文字列を指定。日本語化したいならばここで値を指定すること。
dom
lfrtip
表示制御要素の表示制御。lは表示件数の制御、fはフィルタリングの表示など。文字でそれぞれの表示制御の並びを指定する。
buttons
-
Extensionの追加指定と表示名の指定
お疲れ様でした。

jQuery入門道場
jQuery入門道場

posted with amazlet at 18.07.21
株式会社フェンドーラ (2014-01-19)
売り上げランキング: 1,757
おすすめの記事