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

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">

親テーマをカスタマイズする場合は、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のクラスも用いてテーブル表示をしています。

ちなみに、テーブルの列のに対して以下のようなクラスを指定すると、並び替えを無効にすることもできます。