JAVA Scriptを使用すると、データベースを検索して、指定された条件に該当するデータだけを表示することができます。ここでは、商品のメーカーを指定して、該当する商品をテーブルに表示する方法について考えてみましょう。
商品のメーカーを指定するためのメニューと、テーブルの表示を更新するための実行ボタンをページに配置するように設定します。
<SELECT ID="CategoryKeyword" SIZE="1">
<OPTION VALUE="全商品" SELECTED>全商品</OPTION>
<OPTION VALUE="CANON">CANON</OPTION>
<OPTION VALUE="EPSON">EPSON</OPTION>
<OPTION VALUE="FUJITSU">FUJITSU</OPTION>
<OPTION VALUE="PANASONIC">PANASONIC</OPTION>
<OPTION VALUE="SHARP">SHARP</OPTION>
</SELECT>
<INPUT ID="ExecSearch" TYPE="button" VALUE="実行" onClick="SearchCategory()">ページ読み込み時に、絞り込む前のテーブルを表示するための関数の実行を定義します。
<BODY onLoad="SearchCategory()>
「Table Data Control」オブジェクトの機能を使用して商品の種別の絞込みを行い、指定された種別の商品だけを表示するJAVA Scriptを記述します。
<SCRIPT LANGUAGE="JavaScript">
<!--
function DataSort(Col){
list.SortColumn = Col;
list.Reset();
}
function SearchCategory(){
if(CategoryKeyword.value=="全商品"){
list.FilterColumn=""
list.Reset();
}
else{
list.FilterValue=CategoryKeyword.value;
list.FilterColumn="maker"
list.FilterCriterion="=";
list.Reset();
}
}データの絞込みを行うには、「FilterValue」プロパティ・「FilterColumn」プロパティ・「FilterCriterion」プロパティの３つを組み合わせて条件を指定します。
「FilterColumn」プロパティには絞込みの対象とする項目を指定します。この際、項目はCSVファイルの1行目に記述した項目名で指定します。
例では、全商品を表示する場合は「list.FilterColumn=""」、メーカー別で絞込みを行う場合は「list.FilterColumn="maker"」と指定しています。
