datatable.inc.php

サマリ|ソートや検索、ページネーションなどが可能なテーブルプラグイン
テーブルにソートや検索、ページネーション、ヘッダー固定のスクロールといった機能をもたせることができます。
ソート条件の指定や1ページの表示件数の変更など細かい調整も可能。

ダウンロード

インストール

プラグインの設定

DATATABLE_CDN_CSS
使用するライブラリ (Simple-DataTables) のCDN
DATATABLE_CDN_JS
同上
DATATABLE_TRANSLATE_LABELS
各機能のラベルを日本語化する。デフォルトはtrue
DATATABLE_ENABLE_SORT
ソート機能を有効化する。デフォルトはtrue
DATATABLE_ENABLE_SEARCH
検索機能を有効化する。デフォルトはtrue
DATATABLE_ENABLE_PAGING
ページネーションを有効化する。デフォルトはfalse*1
DATATABLE_PER_PAGE
ページネーション有効時、1ページに表示するデータ件数の初期値。デフォルトは10
DATATABLE_PER_PAGE_SELECT
ページネーション有効時、1ページに表示するデータ件数の選択肢デフォルトは5|10|25|50|100*2*3

使用方法

 #datatable([オプション]){{
 <テーブル>
 }}

特にオプションで指定がない場合はデフォルトで全カラムをソート可能にします。

オプション

オプションデフォルト説明
firstLastfalseページ送りの前後に最初と最後に跳ぶボタンを追加する
fixedColumnsfalseカラムの幅を固定する。ページ切替時に位置がずれるのを防ぐ
fixedHightfalseテーブルの高さを固定する。ページ切替時に位置がずれるのを防ぐ
footerfalseフッターの有効/無効化
headertrueヘッダーの有効/無効化
hiddenHeaderfalseヘッダーの表示/非表示 (?)
nextPrevtrueページ送りボタンの有効/無効化
pagingfalse*4ページネーションの有効/無効化
perPage101ページに表示するデータ件数
perPageSelect5|10|15|20|251ページに表示するデータ件数の選択肢
scrollY(空白)テーブルの高さを指定してスクロールを有効化する。高さの指定は基本的にCSSでの記法が使える
sortabletrue*5全カラムのソートの有効/無効化
searchabletrue*6検索機能の有効/無効化

基本は「オプション名=値」で指定できますが、以下の条件に当てはまる場合はより簡単に指定できます。

カラム毎のソート設定

カラムの数だけ "|" で区切ってソートタイプ (もしくは非表示、ソートなし) を指定します。

指定可能なオプション

上記以外の指定、もしくは空欄の場合、そのカラムはソートなしになります。
また、dateの場合はdate=DD/MM/YYのようにフォーマットを指定できます。
それ以外にもISO_8601、RFC_2822、MYSQLといった規定のフォーマットを指定することも可能です。

使用例と実際の動作はダウンロードの項に記載してあるリンク先で確認してください。

出力結果

連番氏名(カタカナ)氏名(ローマ字)性別電話番号生年月日年齢出身地血液型
1コモリアヤネKomoriAyane04952286721999-07-0522岡山県B
2コガヒデオKogaHideo01897067901933-02-1188高知県B
3カミノゴロウKaminoGorou06881833231962-06-1459愛知県A
4モリカワサイチMorikawaSaichi08807849051967-03-2554福井県O

*1 Data Tablesのデフォルトはtrue
*2 Data Tablesのデフォルトは5|10|15|20|25
*3 実際は配列での指定だが引数でカンマは使いづらいのでこのような指定方法になっている。
*4 プラグイン設定に依存
*5 プラグイン設定に依存
*6 プラグイン設定に依存

トップ   差分 履歴 リロード   一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-06-03 (金) 19:20:35 by pukiwiki 1.5.4