csvファイルをajaxを使ってテーブル表示「jquery.csv2table.js」
今の時代、便利なものが出ているもので、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の画像やソート時の画像を指定することができます。指定しないと表示がおかしくなるようです。
id,op,data,ary){<script>
$(function(){
$('#view1').csv2table('list.csv',{
onload : function(
$('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のビットレートをいろいろな環境でスムーズに聞けるように落としたりしたいので、これからもちょこちょこ変更しようと思います。
- 関連記事
-
- 妖精の森キャンプ場 でソロキャン/ キャンプ記録 (北秋田市森吉 / 秋田) (2018/10/15)
- 大館アメッコ市 を 歩き回ってみる [2017] (2017/02/12)
- あおもり灯りと紙のページェント 2013 (青森市ベイエリア) (2013/12/16)
- 静かすぎてよく眠れる 大内旅館 (秋田市) (2015/10/03)
- Galaxy Nexus で使用しているアプリ一覧 [2012/05/29現在] (2012/05/29)
- FUJIFILM X-E1 - 夕暮れの芝谷地 (2013/08/22)
- ローカル線 秋田内陸縦貫鉄道 あきた美人ライン で 春の角館にプチカメラ旅 - 桜編 (2012/04/30)
- 秋田県大館市で一人できりたんぽが食べられるお店を探してみた 3.本格派 (2016/02/11)
- 日本酒 と 燻製 と DJ (2017/01/02)
- カシモ WiMAX+5G 契約 / Speed Wi-Fi HOME 5G L12 (2022/02/14)
コメント
こんにちは!
csv2tableを検索していたらこちらにたどり着きました。
リンクを張れる部分がやりたいこととピッタリと
マッチして感激しております。
ですが、こちらで想定しているリンクは
全てにあてはまるものではなく、
多々、リンクがないものが存在しており、
$(ojs).each(function(){のあとに
条件分岐(if else)で空白の場合は表示なし、
URLがある場合はそれを表示とするということは
理解できたのですが、うまくできませんでした。
Javascript初心者ですが、ヒントだけでもいただければ
勉強したいと思います。
ご享受のほどよろしくお願いいたします。
>> nanashi7 さん
しばらく技術的なものに触っていないので素人以下の
理解力となっています... お役に立てず申し訳ありません
こんにちは!
返信ありがとうございます。
試行錯誤の上、下記に変更するとうまく動作しました。(汗
------------------------------------
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){ の部分が微妙ですが、
うまく動作しております。
参考にさせていただき、ありがとうございました。