Tabulator

最終更新日時：2018-03-14 18:15:41
jQuery UI

Tabulator は、HTML で機能的なテーブルを簡単に作成できる jQuery UI のプラグインです。
Flexigrid などこの手のプラグインはいろいろあると思いますが、導入がしやすいわりには高機能なのでとても便利です。
ちなみに、Flexigrid を愛用していたのですが、どうも更新が止まってしまったように思えるので、私は Tabulator に乗り換えました(￣ー￣)

使用方法

まず、以下の Tabulator の GitHub リポジトリから Tabulator のファイルを取得します。

https://github.com/olifolkerd/tabulator

使用するのは、tabulator.css と tabulator.js ですので、適当な場所に配置します。

次に、Tabulator は jQuery UI のプラグインですので、当然 jQuery UI が必要です。
例えば、CDN を使うのであれば以下のように jQuery UI を読み込みます。
jQuery UI については、jQuery UI を参照。

あわせて、設置したファイルも読み込みます。

 <link rel="stylesheet" type="text/css" href="tabulator.css">
 <link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
 <script type="text/javascript" src="tabulator.js"></script>

次に、テーブルの本体です。
以下のように、div タグを書くだけです。

 <div id="example-table"></div>

最後に、JS 部分です。
例えば、以下のように tablulator を実行します。

    $("#example-table").tabulator( {
        //height: '666px',
        height: 'auto',
        fitColumns:true,
        ajaxURL:'/ajax/wiki/list',
        //data: tabledata,
        pagination: 'local',
        paginationSize: 20,
        columns:[
            {title:"ID", field:"id", align:'right', sorter:'number', width: '70px'},
            {title:"タイトル", field:"title", sorter:'string', headerFilter:true},
            {title:"カテゴリ", field:'category', sortable: false},
            {title:"最終更新日時", field:"updated_on", align:"center", sorter:'string', width: '200px'},
            {title:"操作", field:'action', sortable:false, width: '230px'},
        ],
        sortBy: 'updaetd_on',
        sortDir: 'desc',
 
        langs:{
            "ja": {
                "pagination":{
                    "first":"最初へ",
                    "first_title":"最初へ",
                    "last":"最後へ",
                    "last_title":"最後へ",
                    "prev":"前へ",
                    "prev_title":"前へ",
                    "next":"次へ",
                    "next_title":"次へ",
                },
            }
        },
        locale: 'ja',
    });

いろいろと指定していますが、基本的にはとても簡単な指定だけで使用することが出来ます。
詳細は以降を参考にしてください。
また、逆に Tabulator はとても機能が豊富ですので、ここですべてはとても紹介しきれません。
詳細は、http://olifolkerd.github.io/tabulator/docs/ をどうぞ。

データの指定方法

まず、表示するデータの項目の定義をします。
上記の例の columns 指定がそれに相当します。

次にデータ本体ですが、JSON 変数で指定する方法と ajax で読み込ませる方法があります。
JSON 変数は、Tabulator のサンプルで記載されている以下が参考になります。

 var tabledata = [
        {id:1, name:"Oli Bob \n steve", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1, lucky_no:5},
        {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true, lucky_no:10},
        {id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true", lucky_no:12},
        {id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980", lucky_no:18},
        {id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999", lucky_no:33},
        {id:6, name:"Frank Harbours", age:"38", gender:"male", height:4, col:"red", dob:"", cheese:1, lucky_no:2},
        {id:7, name:"Jamie Newhart", age:"23", gender:"male", height:3, col:"green", dob:"14/05/1985", cheese:true, lucky_no:63},
        {id:8, name:"Gemma Jane", age:"60", height:0, col:"red", dob:"22/05/1982", cheese:"true", lucky_no:72},
        {id:9, name:"Emily Sykes", age:"42", gender:"female", height:1, col:"maroon", dob:"11/11/1970", lucky_no:44},
        {id:10, name:"James Newman", age:"73", gender:"male", height:5, col:"red", dob:"22/03/1998", lucky_no:9},
 ];

columns で定義した field 名と値のセットですね。
このように JSON 変数を定義し、前述の例ではコメントとしている

 data: tabledata

のように指定すればＯＫです。

ajax の方は、前述の例の通り、ajaxURL に読み込ませる URl を指定します。
ちなみに、ajax で呼ばれて JSON を返す側の処理ですが、以下が PHP の例です。

 $data = array(
    array(id=>1, name=>"Billy Bob", age=>"12", gender=>"male", height=>1, col=>"red", dob=>"", cheese=>1),
    array(id=>2, name=>"Mary May", age=>"1", gender=>"female", height=>2, col=>"blue", dob=>"14/05/1982", cheese=>true),
    array(id=>3, name=>"Christine Lobowski", age=>"42", height=>0, col=>"green", dob=>"22/05/1982", cheese=>"true"),
    array(id=>4, name=>"Brendon Philips", age=>"125", gender=>"male", height=>1, col=>"orange", dob=>"01/08/1980"),
    array(id=>5, name=>"Margret Marmajuke", age=>"16", gender=>"female", height=>5, col=>"yellow", dob=>"31/01/1999"),
 );
 echo(json_encode($data));

その他

だいたい指定例を見れば分かると思いますが、ページャーやソート、ロケールなどにも対応しています。
少し面倒なのは、ページャーの "Prev", "Next" ボタン等はロケール設定して読み込ませないと変更できないところですね。
もちろん、直接マスターの JS ファイルを変更するとか、オーバーライドさせるとかすれば変更できますが(^_^;

わりとよく使いそうな指定は前述の例に含ませていますので、いろいろ試してみてください(^_^;

お問い合わせは掲示板にて。