csvファイルをajaxを使ってテーブル表示「jquery.csv2table.js」

2009/03/04　行ってみた/やってみた | コメント(3)

*コードを変更しています。こちらの記事や、MIXES ARCHIVEのソースを参照ください。偶数/奇数行の色付けや汚いフォントからの変更など、対策を行っていますので、参考にしてください。

今の時代、便利なものが出ているもので、ajax(Javascript)を使っただけでcsvをhtmlに取り込み表示(しかもソート可能)できるんですね。MIX ACHIVEのページのソースが汚く更新にしづらかったので導入してみました。

JQueryとCSV2TABLEが必要になります。導入やサンプルはAll Aboutや作者サンプルページが詳しいです。ver.0.02-b-2.8と、ver.0.02-b-3.01-tmではコードの書き方が変わっているようなのでネットにサンプルがよく記載されているver.0.02-b-2.8を使用しました。

さっぱりどう記述すればよいか分からなかったのですが、試行錯誤の結果動くようになりました。

まず、csvファイルにはこのように書きます。

"Title","DJ","Genre","BitRate","URL"
"Drivin'","&-","House","160kbps","drivin.mp3"


1行目が項目として扱われるようです。ダブルクオートはつけなくても大丈夫なはずですが、編集の際見づらいのでつけ、カンマでデータを区切っています。保存はutf-8で保存してください。

次はhtml側のソースの書き方です。

<script src="./script/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="./script/jquery.csv2table-0.02-b-2.8.js" type="text/javascript" charset="utf-8"></script>


まずHead内でJavascriptを読み込みます。ここでも文字コードはutf-8を指定してください。他のものだと文字化けするか表示されないようです。

<script type="text/javascript">
$.extend($.csv2table,{
loadImg : './script/icon-loadinfo-w.gif', //Image of now loading...
sortNImg : './script/icon-n.gif', //ソート初期画像
sortDImg : './script/icon-d-orange.gif', //降順画像
sortAImg : './script/icon-a-orange.gif' //昇順画像
})
</script>


同じくHead内に記述してください。この画像を変えることによってロード中のAjaxの画像やソート時の画像を指定することができます。指定しないと表示がおかしくなるようです。

<script>
$(function(){
$('#view1').csv2table('list.csv',{

onload : function(id,op,data,ary){
$('tr:even','#'+id).css('background','#eee')

var ojs=$('tr > td:nth-child(5)','#'+id),
downurl='http://mixes.aki.gs/dl.cgi?http://mixes.aki.gs/';
$(ojs).each(function(){
downlink='<a href='+downurl+$(this).text()+' target="_blank">Download</a>';
$(this).html(downlink);
});
}
});
});
</script>
<div id="view1"></div>



これがBODYに記載するコードなのですが、分かりづらいので色分けしてみました。さらに分かりづらくなっている気がしないでもないですが、仕方ないです。

まず、view1の部分。これを別の値に書き換えることによって同じページに何個も表を作れます。
その後のlist.csvは一番最初に記載したデータが入っているファイルです。
その下のonloadでは、一つ飛びでセルに色をつける作業を行っています。背景色が#eee。

td:nth-childの行からは指定行をリンクにするという作業をしていて、td:nth-childの横の数字がcsvの何列目をリンクにするか、Downlink内が文字列の前につけるURLを表しています。私の場合csvの5列目の文字「drvin.mp3」の前に「http://mixes.aki.gs/dl.cgi?http://mixes.aki.gs/」をつける形なので、「<a href="http://mixes.aki.gs/dl.cgi?http://mixes.aki.gs/" target="_blank">Download</a>」と変換して表示していることになります。

これのソースを使っているページがこちら。これからはcsvファイルと、試聴用のasxファイルの更新だけで良いので楽ですね。試聴用のmp3のビットレートをいろいろな環境でスムーズに聞けるように落としたりしたいので、これからもちょこちょこ変更しようと思います。
関連記事

このページのトップに戻る

コメント

こんにちは！
csv2tableを検索していたらこちらにたどり着きました。

リンクを張れる部分がやりたいこととピッタリと
マッチして感激しております。

ですが、こちらで想定しているリンクは
全てにあてはまるものではなく、
多々、リンクがないものが存在しており、
$(ojs).each(function(){のあとに
条件分岐（if else）で空白の場合は表示なし、
URLがある場合はそれを表示とするということは
理解できたのですが、うまくできませんでした。

Javascript初心者ですが、ヒントだけでもいただければ
勉強したいと思います。

ご享受のほどよろしくお願いいたします。

  • nanashi7　: 2013年05月29日

>> nanashi7 さん

しばらく技術的なものに触っていないので素人以下の
理解力となっています...　お役に立てず申し訳ありません

  • &-　: 2013年05月29日

コメントの編集

こんにちは！
返信ありがとうございます。

試行錯誤の上、下記に変更するとうまく動作しました。（汗

------------------------------------

var ojs=$('tr > td:nth-child(5)','#'+id),
//downurl='';は既にフルパスで入力しているので空欄にしています
downurl='';
//nodownlink='';は念のため文字や画像をいれられるように確保
nodownlink='';
downlink='<a href='+downurl+$(this).text()+' target="_blank">link</a>';
$(ojs).each(function(){
if($(this).text() < 1){
$(this).html(nodownlink);
}else{
$(this).html(downlink);
}
------------------------------------

if($(this).text() < 1){　の部分が微妙ですが、
うまく動作しております。

参考にさせていただき、ありがとうございました。

  • nanashi7　: 2013年05月30日
名前
メールアドレス(任意)
WEBサイト(任意)
コメント
パスワード
  管理者にだけ表示を許可する

このページのトップへ戻る