My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

2014/12/28 jQueryのプラグイン「DataTables」を使ってみた

DataTables とは、

HTMLテーブルをとっても高機能にしてくれる jQueryプラグイン

たとえば、以下のような機能がとっても簡単に実装できます。

  • テーブルヘッダにソート機能を付け、列ソートができます。
  • フィルター機能で、検索がとっても簡単にできます。
  • 1ページに表示する行数を選択でき、指定行以降は、ページングで表示することが可能です。

(作成例) こんな感じになります 
f:id:sntkk3:20151115214723p:plain

(すべてHTMLで作成しているテーブルはもちろん、SQLデータベースから読み込んでいるテーブルにも使えます。)


プラグインの入手先は、ここ
http://datatables.net/index
です。

各種パラメータを設定することで、いろいろと便利にカスタマイズが可能です。

設定の仕方には、以下ページがとっても参考になります。

参考サイト

HTML テーブルをナイスに扱う DataTables 〜導入編〜 - A Memorandum :
http://etc9.hatenablog.com/entry/20121029/1351513986

 

ちなみに、課題練習で、大量データを扱うテーブルを作成する際、
このサイトに紹介していただいているようなサンプルCSVデータは、助かります。

役立つサイト

vallog: 無料CSVデータ :
http://valvallow.blogspot.jp/2010/04/csv.html