jQueryのcsv2tableというプラグインを使ってCSVデータをテーブルに表示する

その前「jQueryを使ってXMLを解析操作する(サンプルソースコード含める)」でjQueryでXMLを解析する操作を説明しました。次はjQueryのcsv2tableというプラグインを使ってCSVデータをテーブルに表示しようことの説明です。Ajaxを使うと、JSONやXMLなどのテキストファイルを手軽に読み込んでテーブル要素などへ出力できるので便利ですが、昔ながらのアプリ共通テキストフォーマットとしてはやっはりCSVが活躍しています。

jquery.csv2table.jsはExcelなどで生成できるCSVファイルを読み込みtableとして表示する為のjQueryプラグインです。このプラグインを利用して生成されたテーブルは項目ごとのソートなどにも対応しています。列ごとのソートもできて、jQchartなどを組み合わせれば、 CSVを読み込むだけで、自動的にグラフまで作ることも可能です。

以下は使用方法とサンプルのソースコード

1)、csv2tableとダウンロード

jQueryとcsv2tableは次のサイトで入手できます。http://jquery.com 、ここはcsv2table: http://plugins.jquery.com/project/csv2table

2)、ダウンロードしたjQuery本体とと「jquery.csv2table.js」とhead要素などで読み込む





3)、body要素内に任意のIDを付けた要素を用意する


4)、head要素内などのscript要素でプラグインを実行する



5)、CSVデータを用意する(sample.csv)

№,名前,所属,年齢,手数料
1,ざら,クラスA,10,”100,000 ”
2,まほう,クラスB,8,”80,000 ”
3,ちなと,クラスC,12,”5,000,000 ”
4,ゆみ,クラスD,13,”3,000 ”

6)、sample.csvを読み込んでテーブルを描画する



最後にダウンロードしたimgフォルダをテーブルを描画するファイルと同じフォルダにアップロードしてテーブルを表示できます。

Leave a Reply

Your email address will not be published. Required fields are marked *