CSVファイルをHTMLのtableに変換して表示するjQueryプラグイン jquerycsvtotable の使い方

エクセルや表計算ソフト等で作成したものなどをCSVで出力して、それをwebサイトでHTMLのtableにして表示する事が出来るjQueryプラグイン jquerycsvtotable の使い方を紹介します。

jquerycsvtotable

プラグインページ

https://code.google.com/p/jquerycsvtotable/

ダウンロードページ

https://code.google.com/p/jquerycsvtotable/downloads/detail?name=jquery.csvToTable.js&can=2&q=

プラグインのライセンスはMITとなっています、個人、商用利用可能です

HTMLに組み込む

DEMO 表示

※デモでは、テーブルのデザインにCSSを当ててあります

HTMLのヘッダー当たりにjQueryとプラグインjquerycsvtotableを読み込みます

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.csvToTable.js"></script>

<head></head>の間等にコードを入れます、プラグインへのパスはファイルを設置した場所に合わせて変更してください。同じ階層にある場合は上記の記述になります

次にテーブルを表示したい所に任意のクラス名を付けたdivタグを書く

<div class="csv-table-convert"></div>

CSVをテーブルとして表示したい場所に、これを記述します。class名は適当に付けます、タグもdivタグでなくても可能です。

scriptでCSVファイルを読み込み

<script>
  $(function() {
    $('.csv-table-convert').CSVToTable('set1.csv');
  });
</script>

scriptでjQueryプラグインを実行します。site1.csvのところにはcsvファイルへのパスとなります。同じ階層のフォルダ(ディレクト)にある場合は、ファイル名だけの指定で可能です。csvファイルの手前の .csv-table-convert でtableにしたものを表示する場所を指定しています。bodyの終了タグの次あたりに書きます。

デフォルトでは1行目がヘッダーとして表示されます。テーブルのヘッダーがないようなデータの場合は、ヘッダーをscriptで指定する事が出来ます。

ヘッダーを別途指定する場合

<script>
  $(function() {
    $('.csv-table-convert').CSVToTable('set1.csv', 
      { 
        headers: ['Zenfone 5','スペック']
      }
    );
  });
</script>

headers のところにヘッダー部分を指定できます。文字を”(シングルクォート)で囲って、,(カンマ)で区切ります

その他オプション設定

header以外にも出力されるtableタグのclass名の変更や、ローディングの画像やテキストの変更も出来ます。

separator – separator to use when parsing CSV/TSV data

value will almost always be “,” or “\t” (comma or tab)

if not specified, default value is “,”

headers – an array of headers for the CSV data

if not specified, plugin assumes that the first line of the CSV file contains the header names.

Example: headers: [‘Album Title’, ‘Artist Name’, ‘Price ($USD)’]

tableClass – class name to apply to the <table> tag rendered by the plugin.

theadClass – class name to apply to the <thead> tag rendered by the plugin.

thClass – class name to apply to the <th> tag rendered by the plugin.

tbodyClass – class name to apply to the <tbody> tag rendered by the plugin.

trClass – class name to apply to the <tr> tag rendered by the plugin.

tdClass – class name to apply to the <td> tag rendered by the plugin.

loadingImage – path to an image to display while CSV/TSV data is loading

loadingText – text to display while CSV/TSV is loading

if not specified, default value is “Loading CSV data…”