#author("2022-03-06T12:07:16+09:00","","")
*datatable.inc.php [#r6bfab4d]
サマリ|ソートや検索、ページネーションなどが可能なテーブルプラグイン
テーブルにソートや検索、ページネーション、ヘッダー固定のスクロールといった機能をもたせることができます。
ソート条件の指定や1ページの表示件数の変更など細かい調整も可能。

**ダウンロード [#xebebf47]
-[[github.com:kanateko/pukiwiki-plugin/raw/master/datatable.inc.php]]

**インストール [#v1b02cea]
-上記URLの内容を「datatable.inc.php」の名前で保存してpluginフォルダに入れる

**プラグインの設定 [#z2a0bcd7]
: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((Data Tablesのデフォルトはtrue))
:DATATABLE_PER_PAGE|ページネーション有効時、1ページに表示するデータ件数の初期値。デフォルトは10
:DATATABLE_PER_PAGE_SELECT|ページネーション有効時、1ページに表示するデータ件数の選択肢デフォルトは5|10|25|50|100((Data Tablesのデフォルトは5|10|15|20|25))((実際は配列での指定だが引数でカンマは使いづらいのでこのような指定方法になっている。))

**使用方法 [#sbb5654b]
  #datatable([オプション]){{
  <テーブル>
  }}

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

**オプション [#x0b7baa8]
|~オプション|~デフォルト|~説明|h
|BOLD:150|CENTER:150|470|c
|firstLast|false|ページ送りの前後に最初と最後に跳ぶボタンを追加する|
|fixedColumns|false|カラムの幅を固定する。ページ切替時に位置がずれるのを防ぐ|
|fixedHight|false|テーブルの高さを固定する。ページ切替時に位置がずれるのを防ぐ|
|footer|false|フッターの有効/無効化|
|header|true|ヘッダーの有効/無効化|
|hiddenHeader|false|ヘッダーの表示/非表示 (?)|
|nextPrev|true|ページ送りボタンの有効/無効化|
|paging|false((プラグイン設定に依存))|ページネーションの有効/無効化|
|perPage|10|1ページに表示するデータ件数|
|perPageSelect|5&#124;10&#124;15&#124;20&#124;25|1ページに表示するデータ件数の選択肢|
|scrollY|(空白)|テーブルの高さを指定してスクロールを有効化する。高さの指定は基本的にCSSでの記法が使える|
|sortable|true((プラグイン設定に依存))|全カラムのソートの有効/無効化|
|searchable|true((プラグイン設定に依存))|検索機能の有効/無効化|


-true / false 以外のオプションの設定例
--perPage=25
--perPageSelect=10|50|100
--scrollY=200px

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

-各機能の有効化
--デフォルトがfalseの機能はオプション名だけで有効化できます
---例:firstLast、paging

-各機能の無効化
--デフォルトがtrueの機能は「no + オプション名」で無効化できます
--sortableとsearchableのみそれぞれ「nosort」「nosearch」でも無効化可能
---例:noheader、nonextPrev

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

:指定可能なオプション|
-string (文字列)
-number (数値)
-date (日付)
-hide (非表示)

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

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

***出力結果 [#tbc07ca5]
#datatable(number|string||hide|hide|date=YYYY-MM-DD|number|hide|){{
|~連番|~氏名(カタカナ)|~氏名(ローマ字)|~性別|~電話番号|~生年月日|~年齢|~出身地|~血液型|h
|1|コモリアヤネ|KomoriAyane|女|0495228672|1999-07-05|22|岡山県|B|
|2|コガヒデオ|KogaHideo|男|0189706790|1933-02-11|88|高知県|B|
|3|カミノゴロウ|KaminoGorou|男|0688183323|1962-06-14|59|愛知県|A|
|4|モリカワサイチ|MorikawaSaichi|男|0880784905|1967-03-25|54|福井県|O|
}}
//

トップ   差分 履歴 リロード   一覧 検索 最終更新   ヘルプ   最終更新のRSS