jQueryプラグイン DataTables.Bootstrap

  • このエントリーをはてなブックマークに追加
  • Pocket

テーブルを簡単にリッチにcoolにしてくれるjQueryプラグインのDataTables.
日本語化もできるし、Bootstrap用のスタイルもあってとても便利なテーブルプラグインのメモ。

DataTables

DataTables
これ単体でも十分使えるがBootstrap用のスタイルが用意されている。
他にもFoundationやjQuery UIのスタイルもあるようだ。

デモ

DataTables.Bootstrap

まずは素のBootstrapのtable.

表はW3Techsから引用。
LinuxのサーバOSのシェア

datatables-01

これに以下のリソースを読み込む。

DataTablesの有効化。

これだけ。
ソートや検索、ページングもできるようになる。

datatables-02

スタイリング

DataTablesのオプションでいろいろできるので
ページングの位置変更や日本語化、初期表示件数の変更なんかが可能。

datatables-03

オプション

一番下の ‘sDom’ でフィルターやページネーションの表示を変更できる。
謎の文字列が並んでるが、詳しくは公式のリファレンスを参照。

css

便利なオプション

列のソートを実際は異なる列の値でソートさせることも可能。
アイコンだけの列なんかでソートさせるとか、いろいろ使いみちがある。

enjoy!

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*