• 追加された行はこの色です。
  • 削除された行はこの色です。
#author("2022-02-03T18:06:50+09:00","default:kanateko","kanateko")
#author("2022-02-03T19:07:09+09:00","default:kanateko","kanateko")
#tag(プラグイン,自作,追加)

CENTER:#ref(datatable.jpg,center,wrap,400x0)

#contentsx

*ソートや検索などが可能なテーブル作成プラグイン [#i0279b82]
#infobox(plugin){{
name=datatable
pukiwiki=1.5.3
ver=1.0
update=2022-02-03
}}

ソートや検索、ページネーションなどの機能を持ったテーブルを作成できるプラグイン。
1ページ毎の表示件数を調整したりソートの条件を個別に設定したりといったことも可能。
他にもヘッダーを固定してスクロール可能にするなどの機能が備わっている。

:このプラグインでできること|
-指定したテーブルに様々な機能を加える
--ソート、検索、ページネーション、スクロール、etc...
---いくつかの機能はさらに細かい調整も可能

*ダウンロード [#e789ebf9]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|2022-02-03|1.0|#ul(初版作成)|

*インストール [#w0c581bc]
+GitHubにある「datatable.inc.php」をダウンロードしてpluginフォルダに入れる

*プラグインの設定 [#y0def2d1]
:DATATABLE_CDN_CSS|使用するライブラリ ([[Simple-Data Tables:https://github.com/fiduswriter/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。実際は配列での指定だが引数でカンマは使いづらいのでこのような指定方法になっている。))

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

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

**オプション [#zf5c4b62]
|~オプション|~デフォルト値|~説明|h
|BOLD:150|CENTER:150|470|c
|firstLast|false|ページ送りの前後に最初と最後に跳ぶボタンを追加する|
|fixedColumns|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((プラグイン設定に依存))|全列のソートの有効/無効化|
|sortable|true((プラグイン設定に依存))|全カラムのソートの有効/無効化|
|searchable|true((プラグイン設定に依存))|検索機能の有効/無効化|

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

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

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

#box(solid){{
:true / false 以外のオプションの設定例|
-perPage=25
-perPageSelect=10|50|100
-scrollY=200px
}}

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

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

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

#tab(表示,ソース){{{
#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|
|5|ハマセイラ|HamaSeira|女|0273267688|2004-11-19|17|千葉県|O|
}}
#split
 #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|
 |5|ハマセイラ|HamaSeira|女|0273267688|2004-11-19|17|千葉県|O|
 }}
}}}


*使用例 [#pd23c0fc]
以下はデモ用のダミーデータ

#tab(表示,ソース){{{
#datatable(paging,perPage=10){{
#datatable(paging){{
|~連番|~氏名(カタカナ)|~氏名(ローマ字)|~性別|~電話番号|~生年月日|~年齢|~出身地|~血液型|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|
|5|ハマセイラ|HamaSeira|女|0273267688|2004-11-19|17|千葉県|O|
|6|ハラダミツオ|HaradaMitsuo|男|0952114728|1958-07-11|63|石川県|O|
|7|トツカクニオ|TotsukaKunio|男|0732458952|1988-11-23|33|鹿児島県|A|
|8|ヨシワラマサエ|YoshiwaraMasae|女|0862682481|1940-07-05|81|和歌山県|O|
|9|マチダリュウゾウ|MachidaRyuuzou|男|0696283340|1948-09-19|73|千葉県|A|
|10|カワダハルオ|KawadaHaruo|男|0746484969|1988-12-27|33|福島県|O|
|11|カワハラサキ|KawaharaSaki|女|0110173549|1942-10-14|79|岡山県|O|
|12|イワタニクウヤ|IwataniKuuya|男|0452623061|2000-02-01|22|大分県|O|
|13|オオツトシノブ|OotsuToshinobu|男|08740990|1991-05-24|30|福井県|A|
|14|エノモトシンジ|EnomotoShinji|男|0598408516|1950-10-16|71|岡山県|A|
|15|イワセハルカ|IwaseHaruka|女|0467132033|1957-08-28|64|徳島県|O|
|16|モチヅキトシコ|MochizukiToshiko|女|0296206102|1985-09-08|36|香川県|B|
|17|フクモトハルカ|FukumotoHaruka|女|0787366319|2016-03-25|5|山梨県|AB|
|18|フルカワマモル|FurukawaMamoru|男|0880076992|1944-11-23|77|北海道|B|
|19|ナガヤコト|NagayaKoto|女|0467331702|1996-06-29|25|岡山県|B|
|20|ヤマカワセナ|YamakawaSena|男|0973201138|2011-02-11|10|愛媛県|O|
|21|マツムラヒロシ|MatsumuraHiroshi|男|0766855691|1983-03-31|38|鳥取県|B|
|22|イタバシノブヨシ|ItabashiNobuyoshi|男|0536079380|1962-10-25|59|北海道|A|
|23|ニシワキマキ|NishiwakiMaki|女|0220346936|1967-01-02|55|鳥取県|O|
|24|フルサワユカ|FurusawaYuka|女|0255963649|1987-11-02|34|栃木県|B|
|25|アサダユウナ|AsadaYuuna|女|0391910533|1958-01-14|64|岐阜県|AB|
|26|コヤナギテツロウ|KoyanagiTetsurou|男|0982088783|1975-05-25|46|広島県|A|
|27|グンジユキオ|GunjiYukio|男|0523966118|1942-03-22|79|徳島県|AB|
|28|ミヤチナオジ|MiyachiNaoji|男|0457398146|1959-03-15|62|岐阜県|O|
|29|ホリイキミヒコ|HoriiKimihiko|男|0965219940|1966-10-08|55|静岡県|A|
|30|フナバシユイ|FunabashiYui|女|0761114797|1943-09-30|78|福島県|O|
|31|カワシマナナ|KawashimaNana|女|0820271506|1954-09-13|67|青森県|A|
|32|ツカハラツトム|TsukaharaTsutomu|男|0402029803|1988-12-24|33|福井県|O|
|33|テヅカヒロユキ|TezukaHiroyuki|男|0852319228|1943-05-29|78|神奈川県|O|
|34|セキモトサトミ|SekimotoSatomi|女|0983560717|1996-10-30|25|島根県|B|
|35|イナムラオサム|InamuraOsamu|男|0852390033|2010-08-11|11|島根県|A|
|36|ミヨシシュンセイ|MiyoshiShunsei|男|0283237683|2006-08-12|15|愛媛県|O|
|37|サカガミシンペイ|SakagamiShimpei|男|0884483594|1938-08-27|83|宮崎県|O|
|38|ヨシザワヨシハル|YoshizawaYoshiharu|男|0276133042|1953-05-08|68|富山県|A|
|39|タバタヒロコ|TabataHiroko|女|0737054847|1934-12-08|87|愛知県|AB|
|40|カツマタユウハ|KatsumataYuuha|女|0527173986|2017-10-24|4|沖縄県|O|
|41|オバタタケシ|ObataTakeshi|男|0768181797|1939-08-03|82|奈良県|O|
|42|キムラアイナ|KimuraAina|女|0873687861|2008-02-14|13|広島県|A|
|43|シマヅマキ|ShimazuMaki|女|0926912211|1975-01-28|47|佐賀県|A|
|44|イシガキミナエ|IshigakiMinae|女|01872360|1975-07-12|46|大分県|A|
|45|ホリウチハルナ|HoriuchiHaruna|女|0156310226|2021-12-28|0|埼玉県|AB|
|46|ヤノセイジ|YanoSeiji|男|0875811735|2008-11-17|13|岩手県|A|
|47|オオバヤシマツオ|OobayashiMatsuo|男|0744706390|1948-07-07|73|京都府|O|
|48|アオヤギタカシ|AoyagiTakashi|男|0768753402|1943-11-11|78|大阪府|A|
|49|ヤベユズカ|YabeYuzuka|女|0198911628|1989-04-04|32|秋田県|B|
|50|カクセノン|KakuSenon|女|075497092|1997-12-18|24|愛媛県|O|
|51|ナガハマミヅキ|NagahamaMizuki|女|0761856683|1957-04-05|64|愛媛県|A|
|52|ミナミヨウコ|MinamiYouko|女|0230821865|1934-01-27|88|福岡県|O|
|53|ヒラタシセイ|HirataShisei|男|0996672751|1996-01-05|26|静岡県|O|
|54|アツミタカシ|AtsumiTakashi|男|0731001586|1944-06-05|77|奈良県|O|
|55|ヒラハラリサ|HiraharaRisa|女|0227037040|1935-05-06|86|東京都|A|
|56|キクタサヤ|KikutaSaya|女|0770852692|1934-02-03|88|神奈川県|A|
|57|マスダユウタ|MasudaYuuta|男|0770144989|1959-10-21|62|神奈川県|A|
|58|ナガオサクラ|NagaoSakura|女|0767470915|1957-01-16|65|群馬県|O|
|59|トミダマヨ|TomidaMayo|女|0971352935|1945-10-12|76|岩手県|O|
|60|フクナガイワオ|FukunagaIwao|男|0952827435|1971-09-08|50|青森県|A|
|61|ムライタツオ|MuraiTatsuo|男|0955932174|1958-01-21|64|千葉県|O|
|62|ソメヤシンヤ|SomeyaShinya|男|042440180|1960-05-17|61|兵庫県|A|
|63|ウサミマツオ|UsamiMatsuo|男|0647846778|1973-08-25|48|大阪府|O|
|64|クロザキエイシ|KurozakiEishi|男|0198824696|2010-11-16|11|青森県|B|
|65|カワモトシンゴ|KawamotoShingo|男|0476972972|1989-03-18|32|岩手県|B|
|66|ミナミミチコ|MinamiMichiko|女|0951166581|1936-02-22|85|滋賀県|A|
|67|ホリカワリサ|HorikawaRisa|女|0552467829|1995-07-12|26|高知県|B|
|68|オオクマナナハ|OokumaNanaha|女|0464440442|2016-03-19|5|群馬県|B|
|69|クマクラアサミ|KumakuraAsami|女|0770586284|1935-06-24|86|滋賀県|B|
|70|カセヒロユキ|KaseHiroyuki|男|0233887530|1937-11-13|84|山梨県|O|
|71|シゲマツケンイチ|ShigematsuKenichi|男|0779990982|1949-10-07|72|京都府|O|
|72|カサイケンイチ|KasaiKenichi|男|0859401661|1978-07-12|43|北海道|O|
|73|ウラノハルナ|UranoHaruna|女|0773440452|2005-10-29|16|三重県|O|
|74|オカノハルオ|OkanoHaruo|男|0823681986|1947-07-23|74|宮崎県|O|
|75|タカオマリ|TakaoMari|女|095548830|1985-07-10|36|長野県|A|
|76|テジマアヤナ|TejimaAyana|女|0734096240|1984-07-21|37|熊本県|A|
|77|サカモトトクゾウ|SakamotoTokuzou|男|0279150635|1936-11-06|85|熊本県|A|
|78|ヤマシタミツオ|YamashitaMitsuo|男|0964478484|1988-10-05|33|東京都|A|
|79|イシオカサヤカ|IshiokaSayaka|女|0588033293|1978-05-02|43|奈良県|O|
|80|ナカザワゼンタロウ|NakazawaZentarou|男|0561273493|1955-01-14|67|福島県|B|
|81|オオタリュウキ|OotaRyuuki|男|0859902904|2006-03-25|15|長野県|A|
|82|イチハラチヨ|IchiharaChiyo|女|023459069|1994-06-08|27|三重県|AB|
|83|カワシマアユム|KawashimaAyumu|男|0279482292|1999-08-26|22|徳島県|AB|
|84|タチバナマサコ|TachibanaMasako|女|0795387612|1942-03-14|79|沖縄県|A|
|85|イナバトミコ|InabaTomiko|女|0408489515|1970-12-04|51|石川県|A|
|86|ダイワタツオ|DaiwaTatsuo|男|0892917260|1958-09-09|63|新潟県|A|
|87|オガミリサブロウ|OgamiRisaburou|男|0551838596|1998-12-18|23|京都府|A|
|88|サイトウカツミ|SaitouKatsumi|男|0238688553|1939-12-22|82|宮城県|A|
|89|イチムラチサ|IchimuraChisa|女|0985533642|1970-04-19|51|岩手県|O|
|90|キタザワヤスオ|KitazawaYasuo|男|0265317552|1978-05-03|43|福島県|B|
|91|イシカワヒロユキ|IshikawaHiroyuki|男|0555603075|1977-08-05|44|愛知県|O|
|92|アキタコウジ|AkitaKouji|男|0884008010|1943-04-01|78|愛媛県|AB|
|93|オガタサダ|OgataSada|女|0893367234|1976-07-30|45|福井県|A|
|94|サカイコウイチ|SakaiKouichi|男|0532566765|1960-10-07|61|徳島県|O|
|95|アイダマコ|AidaMako|女|0735235922|1942-10-14|79|三重県|O|
|96|フジノマイカ|FujinoMaika|女|0879080331|1953-03-02|68|福岡県|O|
|97|イケガミアイナ|IkegamiAina|女|0893254025|1950-08-04|71|長崎県|AB|
|98|キウチヒトミ|KiuchiHitomi|女|0963057774|1980-03-04|41|佐賀県|O|
|99|イシクラナナコ|IshikuraNanako|女|074430737|1955-03-09|66|秋田県|B|
|100|アラカワヒサコ|ArakawaHisako|女|0196305301|1944-12-17|77|栃木県|O|
}}
#split
 #datatable(paging){{
 <テーブル>
 |~連番|~氏名(カタカナ)|~氏名(ローマ字)|~性別|~電話番号|~生年月日|~年齢|~出身地|~血液型|h
 |1|コモリアヤネ|KomoriAyane|女|0495228672|1999-07-05|22|岡山県|B|

 }}
}}}


*追加したい機能 [#p5860edc]
-自動で連番を振る
-レイアウトの変更

*参考 [#pce650c6]
-[[Simple-Data Table 公式ドキュメント:https://github.com/fiduswriter/Simple-DataTables/wiki]]
*備考 [#pce650c6]
-漢字はソートに向いていない
-各オプションなどに関して詳しく知りたい場合は[[Simple-Data Table 公式ドキュメント:https://github.com/fiduswriter/Simple-DataTables/wiki]]を参照

*コメント [#d0888ec3]
#pcomment(,10,above,reply)