名前も知らないSEでしょう

この木なんの木気になる樹

JavaScript

bootstrap-tableの使い方(基本中の基本編)

更新日:

この記事では、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を元に同じテーブルを描画しているので、当然左右のテーブルは同じですね。


今回はここまでです。
次回は、よく使いそうなオプションを指定してみます。

336x280

336x280

-JavaScript
-

Copyright© この木なんの木気になる樹 , 2017 AllRights Reserved.