jquery.csv2table.js/ themeroller TEST

---

Basic-1 Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<div id="view0"></div>
<script>
$(function(){
  $('#view0').csv2table('./data/Book12.csv');
});
</script>

---

Basic-2 click and load Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view8').csv2table('./data/Book12.csv');"
       value="Run">
<div id="view8"></div>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

---

Basic-3 csv data from PHP Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view88').csv2table('http://jsgt.org/lib/jquery/plugin/csv2table/v002/data/getcsv.php');"
       value="Run">
<div id="view88"></div>

<?php
$csvdata = 'NO,名前,種類,年齢,金額
1,アイ,Monkey,10,"10,000"
2,タマ,Cat,5,"80,000"
3,チャー,Dog,12,"500,000"
4,アー,Pig,3,"50,000"
5,イー,Weasel,2,"50,000"';
  //HTMLエンティティ（このサンプルではあまり関係ありませんが一応）
  $csvdata = htmlspecialchars($csvdata,ENT_NOQUOTES,"UTF-8");
  //出力をUTF-8に設定
  mb_http_output ( 'UTF-8' );
  //出力
  echo ($csvdata);
?>

---

Basic-4 Inline data from arguments[0] Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data881='\
NO,名前,種類,年齢,金額\r\n\
1,アイ,Monkey,10,"10,000"\r\n\
2,タマ,Cat,5,"80,000"\r\n\
3,チャー,Dog,12,"500,000"\r\n\
4,アー,Pig,3,"50,000"\r\n\
';
</script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view881').csv2table(data881,{
         isInline : true
       });"
       value="Run">
<div id="view881"></div>

Delimited by a tab (\t).one or more fields, separated by ;.
列 タブ区切り / 行 ; 区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data882='\
NO	名前	種類	年齢	金額;\
1	アイ	Monkey	10	"10,000";\
2	タマ	Cat	5	"80,000";\
3	チャー	Dog	12	"500,000";\
4	アー	Pig	3	"50,000";\
';
</script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view882').csv2table(data882,{
         col_sep  : '\t',
         row_sep  : ';',
         isInline : true
       });"
       value="Run">
<div id="view882"></div>

---

setting.use ( use jQchart ) 列 カンマ区切り / 行 改行\r\n区切り + jQchart

title', scaleY : {min: 0,max:120,gap:10} });" value="use: jqchart:line ">

<!--[if IE]>
<script src="./js/excanvas/excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.jqchart-.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<style>
/* label Y  */
.jQchart-labelY-canvasMyID{
	font-size : 12px;
}
/* label Data */
.jQchart-labelData-canvasMyID{
	font-size : 10px;
}
</style>
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view40').csv2table('./data/Book4chart.csv',{
         use      : 'jqchart:line#canvasMyID',
         title    : 'This HTML is setting.config.<b>title</b>',
         scaleY   : {min: 0,max:120,gap:10}
       });"
       value="use: jqchart:line ">
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view40').csv2table('./data/Book4chart.csv',{
         use      : 'jqchart:bar#canvasMyID',
         title    : 'This HTML is setting.config.<b>title</b>',
         scaleY   : {min: 0,max:120,gap:10}
       });"
       value="use: jqchart:bar ">
<canvas id="canvasMyID" height="200"></canvas>
<div id="view40"></div>
* setting.title and setting.scaleY were inherited from jQchart.setting.config

名前,3,4,5,6,7,8,9,10,11,12,1,2
理科,30,40,25,45,70,55,80,90,65,95,96,88
社会,12,15,55,30,70,87,55,30,65,76,50,58
算数,60,43,58,22,38,47,35,67,88,53,92,98

---

setting.sortable (sortable : false) 列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view50').csv2table('./data/Book12-utf8.csv',{
                   sortable : false
                });"
       value="Run">
<div id="view50"></div>
       

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "

---

setting.onload (onload : function) 列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view51').csv2table('./data/Book12-utf8.csv',{
             onload : function(id,op,data,ary){
                           $('#'+id).after('<p>1行目5列目は、'+ary[1][4]+'ですね</p>')
                      } 
                });"
       value="Run">
<div id="view51"></div>
       

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "

---

onload後に 塗りわけ関数classifyByCol @see Function classifyByCol samples

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#classifyTest').csv2table('./data/classify.csv',{
                    onload : function(id,op,data,ary){ 
                       $.csv2table.f.classifyByCol(
                         id,3,[
                           ['>1','#D0FFE0'],
                           ['>3','#98D9FF'],
                           ['>5','#8CA9FF']
                         ]
                       )
                    }
                });"
       value="classifyByCol">
<div id="view542"></div>
       

NO,Name,Kinds,Age,Yen
1,AI,Monkey,10,"100,000"
2,Tama,Cat,5,"80,000"
3,Char,Dog,12,"5,000,000"
4,AA,Pig,3,"50,000"
5,Ii,Weasel,2,"50,000"
6,Gar,Goldfish,1,"5,000"
7,Mike,Tortoise,5,"20,000"
8,Pochi,Tiger,2,"10,000"
9,Tom,Lion,2,"2,000"
10,Mary,Dog,5,"80,000"
11,ToTo,Salmon,2,"60,000"
12,Ponta,Racoon,2,"60,000"

---

onload後に CSSで色づけ td:nth-child(1)列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view41').csv2table('./data/Book12.csv',{
             onload : function(id,op,data,ary){
                         $('td:nth-child(1)','#'+id).css('background','gold')
                      } 
       });" value="Run">
<div id="view41"></div>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

---

onload後に CSSで色づけ tr:even 列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view42').csv2table('./data/Book12.csv',{
             onload : function(id,op,data,ary){
                         $('tr:even','#'+id).css('background','#ddd')
             } 
       });" value="Run">
<div id="view42"></div>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

---

onload後に CSSで色づけ td:odd tr:even 列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view43').csv2table('./data/test.txt',{
             onload : function(id,op,data,ary){
                         $('#'+id)
                           .find('td:odd').css('background','#EFFFBC').end()
                           .find('tr:even').css('background','#FFE0F2')
             } 
       });" value="Run">
<div id="view43"></div>
       

No.,Title,Name,Age,Yen
1,Test1,Toshiro,52,"10000 "
2,Test2,Taro,28,"80000 "
3,Test3,Shiro,12,"5000 "
4,Test4,Gonza,38,"30000"
5,Test5,Itiemon,41,"10000"

---

onload後に CSSで色づけ tr:contains(hogehoge)など 列 カンマ区切り / 行 改行\r\n区切り

かも日記の読み込み完了時間 ブラウザ別ベンチマークテスト Safari3.1との比較

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view44').csv2table(
        //CSVファイルURL
        './data/bench1.txt',
        {
          //CSVファイルをロード後の追加処理
                    //CSVファイルをロード後の追加処理
          onload  : function(id,op,data,ary){
            $('#'+id)
               //IEを含む行の背景色
              .find('tr:contains(IE)').css('background','#EFFFBC').end() 
               //Firefoxを含む行の背景色
              .find('tr:contains(Firefox)').css('background','#EFFFeC').end() 
               //Safariを含む行の背景色と文字の太さ
              .find('tr:contains(Safari)')
                              .css('background','#FFEaF2')
                              .css('font-weight','900').end() 
          }
        })" value="Run">
<div id="view44"></div>
       

ブラウザ,1回目,2回目,3回目,4回目,5回目
IE6,7672,9562,10140,13141,14578
Safari3.1,13812,4235,2516,3625,3406
Firefox2,7625,10000,10438,10156,7438
Firefox3b4,4288,3851,3519,3220,3227
Opera9.5b,4515,3593,4703,3437,3422

---

onload後に カスタムセレクタセレクタで4000以下を抽出 列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<script>
//Add new Selecter value<4000.コンテンツが4000以下の値を抽出するセレクタを作成
jQuery.extend(jQuery.expr[":"], {
  lt4000   : function(a,i,m){ 
    var b = parseFloat(a.textContent||a.innerText||jQuery(a).text()||"");
    return typeof b=='number'? b<4000:false;
  }
});
</script>
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view45').csv2table(
        //CSVファイルURL
        './data/bench1.txt',
        {
          //CSVファイルをロード後の追加処理
          onload  : function(id,op,data,ary){
            $('#'+id)
              //3000ミリ秒以下を赤文字
              .find('td:lt4000').css('color','blue').end() 
          }
        })" value="Run">
<p>
<div id="view45"></div>
</p>

ブラウザ,1回目,2回目,3回目,4回目,5回目
IE6,7672,9562,10140,13141,14578
Safari3.1,13812,4235,2516,3625,3406
Firefox2,7625,10000,10438,10156,7438
Firefox3b4,4288,3851,3519,3220,3227
Opera9.5b,4515,3593,4703,3437,3422

---

onload後に ビルトインセレクタ_csv2table_myCompで塗り分け+jQchart :_csv2table_myComp(条件)

<!--[if IE]>
<script src="./js/excanvas/excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.jqchart-.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<style>
/* label Y  */
.jQchart-labelY-canvasMyID2{
	font-size : 12px;
}
/* label Data */
.jQchart-labelData-canvasMyID2{
	font-size : 10px;
}
</style>
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view453').csv2table('./data/Book4chart.csv',{
         use      : 'jqchart:line#canvasMyID2',
         title    : 'This HTML is setting.config.title',
         scaleY   : {min: 0,max:120,gap:10},
         onload:function(){
           chkComp();
         },
         sortable : false
       });"
       value="use: jqchart:line ">
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view453').csv2table('./data/Book4chart2.csv',{
         use      : 'jqchart:bar#canvasMyID2',
         title    : 'This HTML is setting.config.title',
         scaleY   : {min: 0,max:150,gap:10},
         onload:function(){
           chkComp();
         },
         sortable : false
       });"
       value="use: jqchart:bar ">
<canvas id="canvasMyID2" height="200"></canvas>
<div id="view453"></div>
<script type="text/javascript">
function chkComp(){
 jQuery('table','#view453')
  .find('td:_csv2table_myComp(<=30)').css('background','#f00').end()
  .find('td:_csv2table_myComp(>30)').css('background','#f40').end()
  .find('td:_csv2table_myComp(>50)').css('background','#f60').end()
  .find('td:_csv2table_myComp(>60)').css('background','#f80').end()
  .find('td:_csv2table_myComp(>80)').css('background','#fa0').end()
  .find('td:_csv2table_myComp(>100)').css('background','#fd0').end()
  .find('td:_csv2table_myComp(>150)').css('background','#ff0').end()
} ;
</script>

---

onload後に ビルトインセレクタ_csv2table_hoboNumで数値セル検索 td:_csv2table_hoboNumで検索し 数値(3桁カンマ値含む)の色をオレンジに変えてみる

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view454').csv2table('./data/Book12-utf8.csv',{
         onload:function(id,op,data,ary){ 
           $('#'+id)
             .find('td:_csv2table_hoboNum')
             .css('color','orange')
         }
       });"
       value="_csv2table_hoboNum">
<div id="view454"></div>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"

---

setting.select 列の選択
SELECT
例 select : [ 列番号 , 列番号 ,列番号 , ...n ]
[]記号の意味は省略可ではなくJavaScript配列。列番号は、表示したい列のindex番号で0から始まる連番。型はNumber。

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view54').csv2table('./data/Book12-utf8.csv',{
                    select : [0,1,3]
                });"
       value="Run select:[0,1,3]">
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view54').csv2table('./data/Book12-utf8.csv',{
                    select : [4,2]
                });"
       value="Run select:[4,2]">
<div id="view54"></div>
       

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"

---

setting.where 行の絞込み @see setting.where samples

WHERE
例1 where : [ { '列名' : '条件' } , '&&' , { '列名' : '条件' } , ...n ]
例2 where : [ [ 列番号 , '条件' ] , '&&' , [ 列番号 , '条件' ] , ...n ]
[]記号の意味は省略可ではなくJavaScript配列。列番号は0から始まる連番。'列名'はStringで与えるためクオート('か")で囲み、列番号はNumberであり囲まない。

---

数値
列名で指定する
列番号(0からはじまる連番)でも指定できます (*配列で記述します)

---

複数条件 ('&&'がAND '||'がOR)

---

like パーセント記号 (%でワイルドカード あいまい検索)

---

like アンダスコア記号 (_で1 つの文字と一致)

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<hr>数値<br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view541').csv2table('./data/where1.csv',{
                    where : [{'年齢':'==5'}]
                });"
       value="where : [{'年齢':'==5'}]"> <span style='font-size:0.8em'>列名で指定する</span><br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view541').csv2table('./data/where1.csv',{
                    where : [[3,'<=2']]
                });"
       value="where : [[3,'<=2']]"> <span style='font-size:0.8em'>
 列番号(0からはじまる連番)でも指定できます 
(*配列で記述します)</span><br>
<hr>複数条件 ('&&'がAND '||'がOR)<br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view541').csv2table('./data/where1.csv',{
                    where : [{'NO':'<5'},'&&',{'年齢':'>=10'}]
                });"
       value="where : [{'NO':'<5'},'&&',{'年齢':'>=10'}]">
<hr>like パーセント記号 (%でワイルドカード あいまい検索)<br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view541').csv2table('./data/where1.csv',{
                    where : [{'種類':'like イタ%'}]
                });"
       value="where : [{'種類':'like イタ%'}]">
<hr>like アンダスコア記号 (_で1 つの文字と一致)<br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view541').csv2table('./data/where1.csv',{
                    where : [{'種類':'like タ__'}]
                });"
       value="where : [{'種類':'like タ__'}]">
<p>
<div id="view541"></div>
<div id="view54"></div>
       

NO,名前,種類,年齢,金額
1,アイ,さる,10,"100,000"
2,タマ,ねこ,5,"80,000"
3,チャー,いぬ,12,"5,000,000"
4,アー,子豚,3,"50,000"
5,イー,イタチ,2,"50,000"
6,ガー,金魚3%だ,1,"5,000"
7,ミケ,カメ,5,"20,000"
8,ポチ,_ト_ラ_,2,"10,000"
9,トム,ライオン,2,"2,000"
10,メリー,いぬ,5,"80,000"
11,トト,しゃけ,2,"60,000"
12,ポンタ,タヌキ,2,"60,000"
13,ビィ,金魚300%なのだ,3,"50,000"
14,ポー,ハト_ラバ,8,"10,000"

---

setting.orderBy 並べ替え @see setting.orderBy samples

ORDERBY
例1 orderBy : [ [ '列名' ] , [ '列名' ] , ...n ]
例2 orderBy : [ [ 列番号 ] , [ 列番号 ] , ...n ]
例3 orderBy : [ [ '列名' , 'sortType' ] , [ '列名' , 'sortType' ] , ...n ]
例4 orderBy : [ [ 列番号 , 'sortType' ] , [ 列番号 , 'sortType' ] , ...n ]

[]記号の意味は省略可ではなくJavaScript配列。sortType は、'D'==DESC 降順 'A'==ASC 昇順 。sortType省略可。省略時はASC 昇順。列番号は0から始まる連番。'列名'はStringで与えるためクオート('か")で囲み、列番号はNumberであり囲まない。

---

---

where + orderBy

---

select + where + orderBy

(*where,orderByのindexは select後の連番で記述します)

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [[0]]
                });"
       value="orderBy : [[0]]">
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [[0,'D']]
                });"
       value="orderBy : [[0,'D']]"><br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [['年齢','A']]
                });"
       value="orderBy : [['年齢','A']]">
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [['年齢','A'],['金額','D']]
                });"
       value="orderBy : [['年齢','A'],['金額','D']]"><br>
where + orderBy
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    where : [{'金額':'>=50000'}],
                    orderBy : [[4,'D']]
                });"
       value="where : [{'金額':'>=50000'}] , orderBy : [[4,'D']]">
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    where : [[3,'<=5']],
                    orderBy : [['名前','A']]
                });"
       value="where : [[3,'<=5']], orderBy : [['名前','A']]">
<br>
select + where + orderBy
<span style='font-size:0.8em'>(*where,orderByのindexは select後の連番で記述します)</span>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    select : [1,2,3,4],
                    where : [{'年齢':'==2'}],
                    orderBy : [[3,'A']]
                });"
       value="select:[1,2,3,4],where : [{'年齢':'==2'}] , orderBy : [[3,'A']]">
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    select : [1,2,3,4],
                    where : [[2,'<=3']],
                    orderBy : [['金額','D']]
                });"
       value="select:1,2,3,4],where : [[2,'<=3']] , orderBy :[['金額','D']]">
<div id="view5"></div>
       

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10",100000
2,タマ,ねこ,"5",80000
3,チヤー,いぬ,"12",5000000
4,アー,子豚,3,50000
5,イー,イタチ,2,50000
6,ガー,金魚,1,5000
7,ミケ,カメ,1,20000
8,ポチ,トラ,2,10000
9,トム,ライオン,2,2000
10,ココ,インコ,3,80000
11,トト,しゃけ,2,60000

---

setting.limit 行数制限

LIMIT
例1 limit : [ rowCount ]
例2 limit : [ offset,rowCount ]

[]記号の意味は省略可ではなくJavaScript配列。引数が 1 つの場合、その値は、rowCountで冒頭からの行数を表す。 引数が 2 つの場合、第一引数はoffsetで、最初のレコードまでのオフセットを表し、2 つ目の引数は、rowCountで最大レコード数を表す。最初のレコードのオフセット値は 0（1 ではない）。 もし、limitがnull、あるいは、rowCountが最大レコード数より大きければ、最大レコード数。offset、rowCountともにNumber。

---

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [3]
                });"
       value="limit : [3]">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [0,5]
                });"
       value="limit : [0,5]">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [3,15]
                });"
       value="limit : [3,15]">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [['金額','D']],
                    limit   : [3]
                });"
       value="orderBy : [['金額','D']],limit : [3]">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    where : [{'年齢':'>=3'}],
                    orderBy : [['年齢','D']],
                    limit   : [5]
                });"
       value="where : [{'年齢':'>=3'}],orderBy : [['年齢','D']],limit : [5]">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv');"
       value="limitなし">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : null
                });"
       value="limit : null">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [0]
                });"
       value="limit : [0]">
<div id="view543"></div>
       

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10",100000
2,タマ,ねこ,"5",80000
3,チヤー,いぬ,"12",5000000
4,アー,子豚,3,50000
5,イー,イタチ,2,50000
6,ガー,金魚,1,5000
7,ミケ,カメ,1,20000
8,ポチ,トラ,2,10000
9,トム,ライオン,2,2000
10,ココ,インコ,3,80000
11,トト,しゃけ,2,60000

---

setting.removeDoubleQuote 列 カンマ区切り / 行 改行\r\n区切り (removeDoubleQuote : false 文字囲み""を残す)

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view52').csv2table('./data/Book12-utf8.csv',{
                    removeDoubleQuote : false
                });"
       value="Run">
<div id="view52"></div>
       

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"

---

列 カンマ区切り / 行 改行\r\n区切り (データ内に\r\nあり) rfc4180 2-6 test for rfc4180 2-6 Fields containing line breaks (CRLF)

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view61').csv2table('./data/Book12-utf8-rn.csv');"
       value="Run">
<p>
<div id="view61"></div>
       

ＮＯ,名前,種類,年齢,金額
1,アイ,さ""る,"10
00","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"

---

列 カンマ区切り / 行 改行\r\n区切り (""のエスケープあり) rfc4180 2-7 test for rfc4180 2-7 escaped double-quotes

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view6').csv2table('./data/Book12-utf8-comm.csv');"
       value="Run">
<div id="view6"></div>
       

ＮＯ,名前,種類,年齢,金額
1,アイ,さ""る,"10""00","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"

---

列 タブ区切り / 行 改行\r\n区切り Delimited by a line break (CRLF).one or more fields, separated by Tab.

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view1').csv2table('./data/test-utf8.txt',{col_sep:'\t'});"
       value="Run">
<div id="view1"></div>
       

受付	成約	名前	金額
20070115	20071225	あいうえお	20000
20070506	20070711	かきくけこ	10000
20080123	20080211	さしすせそ	15000
20050325	20050530	たちつてと	2000
20080525	20080606	なにぬねの	50000

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view2').csv2table('./data/zisseki-tb.txt',{col_sep:'\t'});"
       value="Run">
<div id="view2"></div>
       

年月日	納期	内容	希望価格	価格	メモ
20080216	20080217	GoogelMapで地図を表示させ「マーカーボタン」クリックでマーカー表示、更にマーカークリックで吹き出しが現れる。	1500	1500	GoogleMaps+カスタマイズ
20080216	20080217	「ユーザーの声を見る」みたいに「ふわっ～と」文字を表示させたい。	1500	1500	jQuery+カスタマイズ
20080210	20080210	Ajaxなツリーメニューを作りたい	3000	3000	YUI+カスタマイズ
20080201	20080201	腕立て伏せ198回	5000	0	出来ませんでした
20080129	20080130	エクセル内の指定した場所のデータをグラフ化したい。	2000	2000	jQchart+カスタマイズ
20080127	20080127	WebサーバのCSVデータをブラウザへスプレッドシート表示など	2000	2000	カスタマイズ
20080126	20080127	CSV複数データによる複数折れ線グラフ(別サーバーからのデータインポート)など	3000	3000	jQchart+カスタマイズ
20080124	20080125	イントラネットのWebサーバに置かれたCSVファイルを読み込み、ブラウザで折れ線グラフを表示したい	2000	3000	jQchart+カスタマイズ

---

列 タブ区切り / 行 ; 区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view32').csv2table('./data/zisseki-utf8-tb-sc.txt',{col_sep:'\t',row_sep:';'});"
       value="Run">
<div id="view32"></div>
       

年月日	納期	内容	希望価格	価格	メモ;20080216	20080217	GoogelMapで地図を表示させ「マーカーボタン」クリックでマーカー表示、更にマーカークリックで吹き出しが現れる。	1500	1500	GoogleMaps+カスタマイズ;20080216	20080217	「ユーザーの声を見る」みたいに「ふわっ～と」文字を表示させたい。	1500	1500	jQuery+カスタマイズ;20080210	20080210	Ajaxなツリーメニューを作りたい	3000	3000	YUI+カスタマイズ;20080201	20080201	腕立て伏せ198回	5000	0	出来ませんでした;20080129	20080130	エクセル内の指定した場所のデータをグラフ化したい。	2000	2000	jQchart+カスタマイズ;20080127	20080127	WebサーバのCSVデータをブラウザへスプレッドシート表示など	2000	2000	カスタマイズ;20080126	20080127	CSV複数データによる複数折れ線グラフ(別サーバーからのデータインポート)など	3000	3000	jQchart+カスタマイズ;20080124	20080125	イントラネットのWebサーバに置かれたCSVファイルを読み込み、ブラウザで折れ線グラフを表示したい	2000	3000	jQchart+カスタマイズ;

---

列 セミコロン区切り / 行 改行\r\n区切りDelimited by a line break (CRLF).one or more fields, separated by Semicolon.

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view7').csv2table('./data/zisseki-utf8-sc.txt',{col_sep:';'});" 
       value="Run">
<div id="view7"></div>
       

年月日;納期;内容;希望価格;価格;メモ
20080216;20080217;GoogelMapで地図を表示させ「マーカーボタン」クリックでマーカー表示、更にマーカークリックで吹き出しが現れる。;1500;1500;GoogleMaps+カスタマイズ
20080216;20080217;「ユーザーの声を見る」みたいに「ふわっ～と」文字を表示させたい。;1500;1500;jQuery+カスタマイズ
20080210;20080210;Ajaxなツリーメニューを作りたい;3000;3000;YUI+カスタマイズ
20080201;20080201;腕立て伏せ198回;5000;0;出来ませんでした
20080129;20080130;エクセル内の指定した場所のデータをグラフ化したい。;2000;2000;jQchart+カスタマイズ
20080127;20080127;WebサーバのCSVデータをブラウザへスプレッドシート表示など;2000;2000;カスタマイズ
20080126;20080127;CSV複数データによる複数折れ線グラフ(別サーバーからのデータインポート)など;3000;3000;jQchart+カスタマイズ
20080124;20080125;イントラネットのWebサーバに置かれたCSVファイルを読み込み、ブラウザで折れ線グラフを表示したい;2000;3000;jQchart+カスタマイズ

---

set CSS with stylesheet (#id名 .csv2table-table-td)Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り (CSSで色づけは、 テーマローラー側で指定した方が統一しやすいと思うので、あまりお勧めしません。行うなら上記のonload後、クロスブラウザなjQueryのCSSメソッドを使うのが安全。)
*テーマ(ui.theme.css)を使うと背景画像が設定されるので、単純なCSS指定だけでは背景色はブラウザによって見えなかったりします。

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">  
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<style>
#view31 .csv2table-table-td {
  background-color  : #fff88c !important;
  border-color      : orange  !important;
  font-weight       : 900     !important;
}
</style>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view31').csv2table('./data/Book12.csv');"
       value="Run">
<div id="view31"></div>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

たとえば、エクセルで ファイル->名前を付けて保存->テキスト(タブ区切り) (*.txt)などで保存すると、ファイル名指定だけでそのまま読み込めます。 p.s.エクセルのユニコード保存だとutf-16リトルエンディアンになるのですが、どうも文字化け的にあまり芳しくないので、少し面倒でもメモ帳などでutf-8へ変換して使うことをお勧めします。

    op = $.csv2table.setting[id] = $.extend({
      url                : url,
      nowloadingImg      : $.csv2table.loadImg,   //Image of now loading...
      nowloadingMsg      : 'now loading...',      //Massege of  now loading...
      onload             : null,                  //collback function (id,op,data,ary) {}
      appendThead        : null,                  //Array. Append a Row of Thead.(e.g. ["Name","Address"]) 
      sortable           : true,                  //col sort
      row_sep            : '\n',                  //Separator of rows. default '\n'
      col_sep            : ',',                   //Separator(,|\t|;) of cols. default ','
      //like SQL
      select             : '*',                   //select col lists. default '*' are all cols.
      where              : null,                  //Array of where : [{'ColName':'condition'}] etc.
      orderBy            : null,                  //Array of sort col. orderBy:[[colNo|'colName','sortType']]
      limit              : null,                  //Array of limit : [offset,len]
      //Extend Lib
      use                : null,                  //'jqchart:line#canvasID' 'jqchart:bar#canvasID2'
      //Etc
      numArignRight      : true,                  //Set the Number TD to "textAlign : 'right'"
      removeDoubleQuote  : true,                  // remove " of "hogehoge"
      col_midasi         : 0,                     //
      col0color          : true,                  //col[0] color sync jQchart line_strokeStyle
      //ThemeRoller and class
      defaultThemeRoller : './tm/jquery-ui-themeroller-0/ui.theme.css',
      widget_div         : 'ui-widget',
      thead_default      : 'ui-state-default',
      thead_hover        : 'ui-state-hover',
      tbody_content      : 'ui-widget-content',
      icon_sortN         : 'ui-icon ui-icon-triangle-2-n-s csv2table-sortN',
      icon_sortD         : 'ui-icon ui-icon-triangle-1-s csv2table-sortD',
      icon_sortA         : 'ui-icon ui-icon-triangle-1-n csv2table-sortA',
      corner             : 'ui-corner-all',
      //className table 
      cls_tbl            : 'csv2table-table',
      cls_tbl_b_td       : 'csv2table-table-td',
      //className etc 
      cls_hoboNum        : 'csv2table-hoboNum',   //match to number or Number-like (3 digit + comma)
      cls_legends        : 'csv2table-legends'    //useing in classifyByCol Method. Hanrei box
    },setting);