テーブルにjQueryで並び替え、検索、ページネーション機能を付ける「Bootstrap Data Table」の使い方

Bootstrap Data TableというjQueryプラグインが、手軽にテーブルに機能追加できて、「後々何かに利用できないかな」と思ったもので、メモがてら紹介です。

スポンサーリンク
レクタングル(大)広告

Bootstrap Data Tableとは

Bootstrap - Data Table

Bootstrap Data Tableは、サイト上の静的なテーブルに、jQueryだけで並び替え、検索、ページネーション機能を付加することができるjQueryプラグインです。

このプラグインを使用すると、テーブルにはBootstrapのスタイルが適用されて、以下のようなテーブルになります。

#IDUsernameFirst NameLast Name
200janedoeYaneDoe
100zanedoeJaneMoe
300aanedoeLaneDoe
100canedoeJaneBoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
100janedoeJaneDoe
210johndoeJohnDoe
310johndoeJohnDoe
410johndoeJohnDoe
510johndoeJohnDoe
610johndoeJohnDoe
710johndoeJohnDoe
810johndoeJohnDoe
910johndoeJohnDoe
100johndoeJohnDoe
110johndoeJohnDoe
120johndoeJohnDoe
130johndoeJohnDoe
140johndoeJohnDoe
150johndoeJohnDoe
160johndoeJohnDoe
170johndoeJohnDoe
180johndoeJohnDoe
190johndoeJohnDoe

Bootstrap Data Table利用の主な手順

Bootstrap Data Tableを利用するのに必要な主な手順は以下です。

  1. ダウンロード&設置
  2. ヘッダーでCSSファイルの読み込み
  3. フッターでjsファイルとスクリプトの読み込み
  4. テーブルを作成する

このプラグインは、BootstrapやFont Awesomeを利用するので、読み込むファイルが結構多いです。

ダウンロード&設置

まずは、Bootstrap Data Tableに移動し、zipファイルをダウンロードします。

GitHub - pguso-bootstrap-data-table- BDT - Bootstrap Data Table - sorting, pagination and search for tables

bootstrap-data-table-master.zipというファイルがダウンロードされるので、解凍します。

で、中にある「cssフォルダ」と「jsフォルダ」を中身のファイルごと、プロジェクトフォルダに以下のように設置します。

bootstrap-data-tableの設置方法

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">
親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()をget_template_directory_uri()に変更してください。

フッターで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>
親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()をget_template_directory_uri()に変更してください。

テーブルを作成する

あとは、先程指定したテーブルの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サイトで利用するには良いのかもしれません。

そうなると、かなり使用する場面は限られてしまいますが;

参考 Bootstrap Data Table