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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

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

Bootstrap Data Tableとは

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を利用するのに必要な主な手順は以下です。

  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>内に以下のようにコピペしてください。

WordPressのカスタマイズ(子テーマ)であれば、<head></head>内に、以下のようにコピペします。

親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()をget_template_directory_uri()に変更してください。

フッターでjsファイルとスクリプトの読み込み

次は、フッターでjsファイルの呼び出しと、スクリプトの記入です。

通常のサイトであれば、</body>手前で以下のようにコピペしてください。

スクリプト部分は、単にテーブルのID(#bootstrap-table)を指定し、以下のように書くだけです。

WordPressのカスタマイズ(子テーマ)であれば</body>手前に以下のようにコピペしてください。

親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()をget_template_directory_uri()に変更してください。

テーブルを作成する

あとは、先程指定したテーブルのID(#bootstrap-table)を使用して、以下のようなテーブルを作成するだけです。

Bootstrapのクラスも用いてテーブル表示をしています。

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

Bootstrap Data Tableの難点

使ってみて気づいたのですが、Bootstrap Data Tableには、以下のような難点があります。

  • Bootstrapのcssも読み込むのでスタイルが引っ張られてしまう
  • Bootstrapのcssを使わないことも出来るが、cssを自前で書かないとスタイルが崩れる
  • 並び替え機能はテキスト基準で並び替えられる(数値でソートできない)
  • 並び替え機能はページネーションで隠れている部分はソートできない

Bootstrapを使用しないサイトで利用するには、このプラグインは使いづらいところがあります。

また、並べ替え機能が「数字に対応していない」のや「表全体の並べ替えはできない(表示部分ののみ)」なんてのも、使いづらいところです。

まとめ

Bootstrap Data Tableを使ってはみたものの、結構使いづらい面もありました。

なので、テーブルの、「ページネーション機能」と「検索機能」のみをBootstrapサイトで利用するには良いのかもしれません。

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

参考 Bootstrap Data Table