2015/10/13

非同期処理 HTML 検索窓を追加する

過去に書いた内容のブラッシュアップ

http://t0463.blogspot.jp/2015/06/windowsserver2012sshsqlcsv.html

jquery.csv2table を使い、csvを表にして表示させているが、
検索して、行を絞り込みたいという要望が出たので、
実装させてみる。
 
http://jsgt.org/lib/jquery/plugin/csv2table/v002/test.htm
↑このサイトのsetting.where 行の絞込み
をほぼそのまま流用にさせていただいた。ありがとうございます。
 
中身はこんな感じ 
 
<body> 
<input type="text" id="word">
<button type="button" id="btn-search">番号で検索</button>
<input type="text" id="word2">
<button type="button" id="btn-search2">住所で検索</button>
<div id="view1"></div>
<script type="text/javascript">
$().ready ( function() {
$('#btn-search').click ( function() {
$('#view1').csv2table('./listUTF8.csv', {
where: [ {'検索させたい列名':'like' + '%' + $('#word').val() + '%'} ]
});
});
});
</script>
<script type="text/javascript">
$().ready ( function() {
$('#btn-search2').click ( function() {
$('#view1').csv2table('./listUTF8.csv', {
where: [ {'検索させたい列名2':'like' + '%' + $('#word2').val() + '%'} ]
});
});
});
</script>
<br>
<font size ='2'>一覧表示</font>
<div id="view0"></div>

<script>
$(function(){
  $('#view0').csv2table('./listUTF8.csv');
});
</script>
</body>