自作プラグイン/datatable

2022-02-03 (木) 19:07:09

カテゴリ:プラグイン 自作 追加

datatable.jpg

ソートや検索などが可能なテーブル作成プラグイン

datatable.inc.php
製作者kanateko
ライセンスGPLv3
バージョン1.0
動作確認PukiWiki 1.5.3 - 1.5.4
最終更新2022-02-03

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

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

ダウンロード

最新: GitHub

日付バージョン備考
2022-02-031.0
  • 初版作成

セットアップ

  1. GitHubにある「datatable.inc.php」をダウンロードしてpluginフォルダに入れる
  2. pukiwiki.ini.phpでマルチラインプラグインを許可する。
 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled

プラグインの設定

DATATABLE_CDN_CSS
使用するライブラリ (Simple-Data Tables) の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

使用方法

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

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

オプション

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

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

各機能の有効化
  • デフォルトがfalseの機能はオプション名だけで有効化できる
    • 例:firstLast、paging
各機能の無効化
  • デフォルトがtrueの機能は「no + オプション名」で無効化できる
    • sortableとsearchableのみそれぞれ「nosort」「nosearch」でも無効化可能
    • 例:noheader、nonextPrev
true / false 以外のオプションの設定例
  • perPage=25
  • perPageSelect=10|50|100
  • scrollY=200px

カラム毎のソート設定

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

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

上記以外の指定、もしくは空欄の場合はソートなしになる。
また、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
5ハマセイラHamaSeira02732676882004-11-1917千葉県O
#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|
}}

使用例

以下はデモ用のダミーデータ

連番氏名(カタカナ)氏名(ローマ字)性別電話番号生年月日年齢出身地血液型
1コモリアヤネKomoriAyane04952286721999-07-0522岡山県B
2コガヒデオKogaHideo01897067901933-02-1188高知県B
3カミノゴロウKaminoGorou06881833231962-06-1459愛知県A
4モリカワサイチMorikawaSaichi08807849051967-03-2554福井県O
5ハマセイラHamaSeira02732676882004-11-1917千葉県O
6ハラダミツオHaradaMitsuo09521147281958-07-1163石川県O
7トツカクニオTotsukaKunio07324589521988-11-2333鹿児島県A
8ヨシワラマサエYoshiwaraMasae08626824811940-07-0581和歌山県O
9マチダリュウゾウMachidaRyuuzou06962833401948-09-1973千葉県A
10カワダハルオKawadaHaruo07464849691988-12-2733福島県O
11カワハラサキKawaharaSaki01101735491942-10-1479岡山県O
12イワタニクウヤIwataniKuuya04526230612000-02-0122大分県O
13オオツトシノブOotsuToshinobu087409901991-05-2430福井県A
14エノモトシンジEnomotoShinji05984085161950-10-1671岡山県A
15イワセハルカIwaseHaruka04671320331957-08-2864徳島県O
16モチヅキトシコMochizukiToshiko02962061021985-09-0836香川県B
17フクモトハルカFukumotoHaruka07873663192016-03-255山梨県AB
18フルカワマモルFurukawaMamoru08800769921944-11-2377北海道B
19ナガヤコトNagayaKoto04673317021996-06-2925岡山県B
20ヤマカワセナYamakawaSena09732011382011-02-1110愛媛県O
21マツムラヒロシMatsumuraHiroshi07668556911983-03-3138鳥取県B
22イタバシノブヨシItabashiNobuyoshi05360793801962-10-2559北海道A
23ニシワキマキNishiwakiMaki02203469361967-01-0255鳥取県O
24フルサワユカFurusawaYuka02559636491987-11-0234栃木県B
25アサダユウナAsadaYuuna03919105331958-01-1464岐阜県AB
26コヤナギテツロウKoyanagiTetsurou09820887831975-05-2546広島県A
27グンジユキオGunjiYukio05239661181942-03-2279徳島県AB
28ミヤチナオジMiyachiNaoji04573981461959-03-1562岐阜県O
29ホリイキミヒコHoriiKimihiko09652199401966-10-0855静岡県A
30フナバシユイFunabashiYui07611147971943-09-3078福島県O
31カワシマナナKawashimaNana08202715061954-09-1367青森県A
32ツカハラツトムTsukaharaTsutomu04020298031988-12-2433福井県O
33テヅカヒロユキTezukaHiroyuki08523192281943-05-2978神奈川県O
34セキモトサトミSekimotoSatomi09835607171996-10-3025島根県B
35イナムラオサムInamuraOsamu08523900332010-08-1111島根県A
36ミヨシシュンセイMiyoshiShunsei02832376832006-08-1215愛媛県O
37サカガミシンペイSakagamiShimpei08844835941938-08-2783宮崎県O
38ヨシザワヨシハルYoshizawaYoshiharu02761330421953-05-0868富山県A
39タバタヒロコTabataHiroko07370548471934-12-0887愛知県AB
40カツマタユウハKatsumataYuuha05271739862017-10-244沖縄県O
41オバタタケシObataTakeshi07681817971939-08-0382奈良県O
42キムラアイナKimuraAina08736878612008-02-1413広島県A
43シマヅマキShimazuMaki09269122111975-01-2847佐賀県A
44イシガキミナエIshigakiMinae018723601975-07-1246大分県A
45ホリウチハルナHoriuchiHaruna01563102262021-12-280埼玉県AB
46ヤノセイジYanoSeiji08758117352008-11-1713岩手県A
47オオバヤシマツオOobayashiMatsuo07447063901948-07-0773京都府O
48アオヤギタカシAoyagiTakashi07687534021943-11-1178大阪府A
49ヤベユズカYabeYuzuka01989116281989-04-0432秋田県B
50カクセノンKakuSenon0754970921997-12-1824愛媛県O
51ナガハマミヅキNagahamaMizuki07618566831957-04-0564愛媛県A
52ミナミヨウコMinamiYouko02308218651934-01-2788福岡県O
53ヒラタシセイHirataShisei09966727511996-01-0526静岡県O
54アツミタカシAtsumiTakashi07310015861944-06-0577奈良県O
55ヒラハラリサHiraharaRisa02270370401935-05-0686東京都A
56キクタサヤKikutaSaya07708526921934-02-0388神奈川県A
57マスダユウタMasudaYuuta07701449891959-10-2162神奈川県A
58ナガオサクラNagaoSakura07674709151957-01-1665群馬県O
59トミダマヨTomidaMayo09713529351945-10-1276岩手県O
60フクナガイワオFukunagaIwao09528274351971-09-0850青森県A
61ムライタツオMuraiTatsuo09559321741958-01-2164千葉県O
62ソメヤシンヤSomeyaShinya0424401801960-05-1761兵庫県A
63ウサミマツオUsamiMatsuo06478467781973-08-2548大阪府O
64クロザキエイシKurozakiEishi01988246962010-11-1611青森県B
65カワモトシンゴKawamotoShingo04769729721989-03-1832岩手県B
66ミナミミチコMinamiMichiko09511665811936-02-2285滋賀県A
67ホリカワリサHorikawaRisa05524678291995-07-1226高知県B
68オオクマナナハOokumaNanaha04644404422016-03-195群馬県B
69クマクラアサミKumakuraAsami07705862841935-06-2486滋賀県B
70カセヒロユキKaseHiroyuki02338875301937-11-1384山梨県O
71シゲマツケンイチShigematsuKenichi07799909821949-10-0772京都府O
72カサイケンイチKasaiKenichi08594016611978-07-1243北海道O
73ウラノハルナUranoHaruna07734404522005-10-2916三重県O
74オカノハルオOkanoHaruo08236819861947-07-2374宮崎県O
75タカオマリTakaoMari0955488301985-07-1036長野県A
76テジマアヤナTejimaAyana07340962401984-07-2137熊本県A
77サカモトトクゾウSakamotoTokuzou02791506351936-11-0685熊本県A
78ヤマシタミツオYamashitaMitsuo09644784841988-10-0533東京都A
79イシオカサヤカIshiokaSayaka05880332931978-05-0243奈良県O
80ナカザワゼンタロウNakazawaZentarou05612734931955-01-1467福島県B
81オオタリュウキOotaRyuuki08599029042006-03-2515長野県A
82イチハラチヨIchiharaChiyo0234590691994-06-0827三重県AB
83カワシマアユムKawashimaAyumu02794822921999-08-2622徳島県AB
84タチバナマサコTachibanaMasako07953876121942-03-1479沖縄県A
85イナバトミコInabaTomiko04084895151970-12-0451石川県A
86ダイワタツオDaiwaTatsuo08929172601958-09-0963新潟県A
87オガミリサブロウOgamiRisaburou05518385961998-12-1823京都府A
88サイトウカツミSaitouKatsumi02386885531939-12-2282宮城県A
89イチムラチサIchimuraChisa09855336421970-04-1951岩手県O
90キタザワヤスオKitazawaYasuo02653175521978-05-0343福島県B
91イシカワヒロユキIshikawaHiroyuki05556030751977-08-0544愛知県O
92アキタコウジAkitaKouji08840080101943-04-0178愛媛県AB
93オガタサダOgataSada08933672341976-07-3045福井県A
94サカイコウイチSakaiKouichi05325667651960-10-0761徳島県O
95アイダマコAidaMako07352359221942-10-1479三重県O
96フジノマイカFujinoMaika08790803311953-03-0268福岡県O
97イケガミアイナIkegamiAina08932540251950-08-0471長崎県AB
98キウチヒトミKiuchiHitomi09630577741980-03-0441佐賀県O
99イシクラナナコIshikuraNanako0744307371955-03-0966秋田県B
100アラカワヒサコArakawaHisako01963053011944-12-1777栃木県O
#datatable(paging){{
|~連番|~氏名(カタカナ)|~氏名(ローマ字)|~性別|~電話番号|~生年月日|~年齢|~出身地|~血液型|h
|1|コモリアヤネ|KomoriAyane|女|0495228672|1999-07-05|22|岡山県|B|
︙
}}

追加したい機能

  • 自動で連番を振る
  • レイアウトの変更

備考

コメント

最新の10件を表示しています。 コメントページを参照

  • お世話になります。
    こちらのdatetableプラグインを使用すると、cellspacingが0のテーブルが生成され枠線が消えてしまうのは、現時点では変更できないのでしょうか?
    レイアウトの変更機能を検討しているとのことですので、とても楽しみにしております。 -- 2022-03-09 (水) 13:31:04
    • コメントありがとうございます。
      枠線が消えてしまうのはスクリプトの読み込み時にtableに追加される「dataTable-table」クラスに「border-spacing: 0」が指定されているためですね。なので、これを上書きしてしまえば解決するかと思います。
      それとレイアウト変更機能に関して期待させてしまって申し訳ないのですが、これはライブラリに備わっている上下のインタラクト可能部分のレイアウト変更機能に関して言及したもので、テーブルのデザインやスタイルに関しては今の所各々CSSなどを使って変更してもらえればと考えています。 -- kanateko 2022-03-10 (木) 10:50:26
      • お返事ありがとうございます。
        デザインの件については勘違いしており申し訳ございません。
        border-spacing:0は具体的にはどこで指定されているのでしょうか。
        プラグイン内のテーブル作成用クラスあたりを書き換えなければいけないのかなと思いましたが、知識がない者には難しいのでしょうか。 -- 2022-03-11 (金) 12:11:33
      • とりあえず簡単な解決方法としては、skinフォルダにあるpukiwiki.cssの.style_tableの指定部分に「border-spacing: 1px!important;」を加えてみてください。 -- kanateko 2022-03-11 (金) 17:36:16
        .style_table {
          padding:0;
          border:0;
          margin:auto;
          text-align:left;
          color:inherit;
          background-color:#ccd5dd;
          border-spacing:1px!important; /* これを追加 */
        }
        
      • cssにborder-spacing: 1pxは入れて試していましたが、importantで優先されることを知りませんでした。
        枠線が付き、作りたかったテーブルとなりました。
        丁寧に説明していただき本当にありがとうございます・・! -- 2022-03-12 (土) 12:01:40
  • こちらのdatatable使わせていただいております、大変便利でありがたいです。
    pukiwiki-1.5.4_utf8でPKWKEXP_DISABLE_MULTILINE_PLUGIN_HACKを1の状態でこちらのページの例にあるようなカラム毎のソート設定をするとmsg_no_tableのエラーメッセージが出てしまいます、何かわかりますでしょうか。 -- maine_coon_hs 2022-09-26 (月) 11:51:43
    • コメントありがとうございます。PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACKは0に設定してください。その状態でマルチライン部分にテーブルが含まれていればエラーは出ないはずです。 -- kanateko 2022-09-26 (月) 13:55:01
      • 完全に逆のことしてました、お騒がせしました -- maine_coon_hs 2022-09-27 (火) 17:01:53