Bootstrap Data TableというjQueryプラグインが、手軽にテーブルに機能追加できて、「後々何かに利用できないかな」と思ったもので、メモがてら紹介です。
目次
Bootstrap Data Tableとは
Bootstrap Data Tableは、サイト上の静的なテーブルに、jQueryだけで並び替え、検索、ページネーション機能を付加することができるjQueryプラグインです。
このプラグインを使用すると、テーブルにはBootstrapのスタイルが適用されて、以下のようなテーブルになります。
#ID | Username | First Name | Last Name |
---|---|---|---|
200 | janedoe | Yane | Doe |
100 | zanedoe | Jane | Moe |
300 | aanedoe | Lane | Doe |
100 | canedoe | Jane | Boe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
100 | janedoe | Jane | Doe |
210 | johndoe | John | Doe |
310 | johndoe | John | Doe |
410 | johndoe | John | Doe |
510 | johndoe | John | Doe |
610 | johndoe | John | Doe |
710 | johndoe | John | Doe |
810 | johndoe | John | Doe |
910 | johndoe | John | Doe |
100 | johndoe | John | Doe |
110 | johndoe | John | Doe |
120 | johndoe | John | Doe |
130 | johndoe | John | Doe |
140 | johndoe | John | Doe |
150 | johndoe | John | Doe |
160 | johndoe | John | Doe |
170 | johndoe | John | Doe |
180 | johndoe | John | Doe |
190 | johndoe | John | Doe |
Bootstrap Data Table利用の主な手順
Bootstrap Data Tableを利用するのに必要な主な手順は以下です。
- ダウンロード&設置
- ヘッダーでCSSファイルの読み込み
- フッターでjsファイルとスクリプトの読み込み
- テーブルを作成する
このプラグインは、BootstrapやFont Awesomeを利用するので、読み込むファイルが結構多いです。
ダウンロード&設置
まずは、Bootstrap Data Tableに移動し、zipファイルをダウンロードします。
bootstrap-data-table-master.zipというファイルがダウンロードされるので、解凍します。
で、中にある「cssフォルダ」と「jsフォルダ」を中身のファイルごと、プロジェクトフォルダに以下のように設置します。
WordPressの場合は、テーマ(子テーマ)フォルダ直下にcssとjsフォルダをコピペしてください。
ヘッダーでCSSファイルの読み込み
まずはヘッダーでCSSファイルを読み込みます。
通常のサイトであれば、<head></head>内に以下のようにコピペしてください。
<link href="css/vendor/bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="css/vendor/font-awesome.min.css" type="text/css" rel="stylesheet"> <link href="css/jquery.bdt.css" type="text/css" rel="stylesheet">
WordPressのカスタマイズ(子テーマ)であれば、<head></head>内に、以下のようにコピペします。
<link href="<?php echo get_stylesheet_directory_uri(); ?>/css/vendor/bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="<?php echo get_stylesheet_directory_uri(); ?>/css/vendor/font-awesome.min.css" type="text/css" rel="stylesheet"> <link href="<?php echo get_stylesheet_directory_uri(); ?>/css/jquery.bdt.css" type="text/css" rel="stylesheet">
フッターでjsファイルとスクリプトの読み込み
次は、フッターでjsファイルの呼び出しと、スクリプトの記入です。
通常のサイトであれば、</body>手前で以下のようにコピペしてください。
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="js/vendor/bootstrap.min.js" type="text/javascript"></script> <script src="js/vendor/jquery.sortelements.js" type="text/javascript"></script> <script src="js/jquery.bdt.js" type="text/javascript"></script> <script> $(document).ready( function () { $('#bootstrap-table').bdt(); }); </script>
スクリプト部分は、単にテーブルのID(#bootstrap-table)を指定し、以下のように書くだけです。
<script> $(document).ready( function () { $('#bootstrap-table').bdt(); }); </script>
WordPressのカスタマイズ(子テーマ)であれば</body>手前に以下のようにコピペしてください。
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/vendor/bootstrap.min.js" type="text/javascript"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/vendor/jquery.sortelements.js" type="text/javascript"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.bdt.js" type="text/javascript"></script> <script> $(document).ready( function () { $('#bootstrap-table').bdt(); }); </script>
テーブルを作成する
あとは、先程指定したテーブルのID(#bootstrap-table)を使用して、以下のようなテーブルを作成するだけです。
<table class="table table-hover" id="bootstrap-table"> <thead> <tr> <th>#ID</th> <th>Username</th> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>200</td> <td>janedoe</td> <td>Yane</td> <td>Doe</td> </tr> <!-- 省略... --> </tbody> </table>
Bootstrapのクラスも用いてテーブル表示をしています。
ちなみに、テーブルの列のに対して以下のようなクラスを指定すると、並び替えを無効にすることもできます。
<th class="disable-sorting">#ID</th>
Bootstrap Data Tableの難点
使ってみて気づいたのですが、Bootstrap Data Tableには、以下のような難点があります。
- Bootstrapのcssも読み込むのでスタイルが引っ張られてしまう
- Bootstrapのcssを使わないことも出来るが、cssを自前で書かないとスタイルが崩れる
- 並び替え機能はテキスト基準で並び替えられる(数値でソートできない)
- 並び替え機能はページネーションで隠れている部分はソートできない
Bootstrapを使用しないサイトで利用するには、このプラグインは使いづらいところがあります。
また、並べ替え機能が「数字に対応していない」のや「表全体の並べ替えはできない(表示部分ののみ)」なんてのも、使いづらいところです。
まとめ
Bootstrap Data Tableを使ってはみたものの、結構使いづらい面もありました。
なので、テーブルの、「ページネーション機能」と「検索機能」のみをBootstrapサイトで利用するには良いのかもしれません。
そうなると、かなり使用する場面は限られてしまいますが;