この記事では、bootstrap-tableの基本的な使い方をまとめています。
bootstrap-tableとは
bootstrap-tableは、bootstrapのテーブルにソート、ページング、チェックボックス、ラジオボタンをはじめとし、様々な機能を追加した拡張ライブラリです。JSONやJavaScriptのオブジェクトから、便利機能を追加したテーブルを描画できるものと考えてもらえれば良いかと思います。
必要なライブラリのインポート
まずは、bootstrap-tableを利用するために必要なライブラリをインポートする必要があります。
bootstrap-tableは、jquery、bootstrapに依存しているため、自身より先にそれらを読み込む必要があります。
HTMLのみで利用する
それでは、早速bootstrap-tableを動かしてみましょう。
bootstrap-tableは、Ajaxで外部のJSONを取得し、テーブルを描画することができます。
下記は、http://kuneo.org/sandbox/bootstrap-table/json/getstart.jsonからAjaxでJSONを取得する例になります。
HTMLから利用する場合は、JSONと対応するキーをテーブルのカラム（thタグ）にdata-field="name"のように指定します。
今回は、上述のURLからJSONを取得するため、tableタグのdata-url属性にURLを記述しています。
そして、tableタグの属性に、data-toggle="true"と記述しています。これを記述することで、このテーブルはbootstrap-tableを利用する、と宣言します。
このように、HTMLから利用する場合は、tableタグやthタグに利用するオプションを属性として付与することで、様々な機能を利用することができます。テーブル全体に影響をあたえるオプションはtableタグに、カラムに影響をあたえるオプションはthタグに記述する、という風に考えればOKです。静的なテーブルを描画する場合は、この方法で十分だと思います。
JavaScriptから利用する
同様のテーブルを、今度はJavaScriptから描画してみましょう。
HTMLには、空のtableタグのみ記述しています。
先ほど、tableタグやthタグに記述した内容を、JavaScriptから実現します。
JavaScriptからbootstrap-tableを利用する場合、該当のtableタグをjqueryで指定し、関数から呼び出す必要があります。上記例の3行目が、HTML上のtableタグを指定してbootstrap-tableを呼び出している箇所です。
関数呼び出しの引数として、利用するオプションを指定してあげる必要があります。HTMLではtableタグに記述していたオプションは第一階層に、thタグに記述していたオプションは、第一階層をcolumnsとして、その配下に記述すればOKです。各カラムのヘッダは、titleとして定義します。
テーブルのカラムを動的に生成することができるので、状況に応じて柔軟に形を変えるテーブルを描画する必要がある場合は、JavaScriptからの描画を利用してみてもよいかもしれませんね。
オプションとして指定する変数名は、公式ページのドキュメントを参照してみてください。
参考
上記のコードを用いたサンプルがこちらです。
同じJSONを元に同じテーブルを描画しているので、当然左右のテーブルは同じですね。
今回はここまでです。
次回は、よく使いそうなオプションを指定してみます。