サンプル

jQuery.ajax csv絞り込み検索＆ページング

share
動作対象環境
IE 6 ～ FF 2 ～ Chrome Safari 3 ～ Opera 9 ～
仕様
jQuery1.4.4利用 csv外部データ
動作サンプル

サンプルのみを別窓で表示

サンプルダウンロード
サンプルダウンロード

解説
csvデータから非同期通信によってデータを抽出する。

その際、フォームで選択した条件によって各項目の表示非表示を判別した後に、決められた数の項目をブラウザに出力し、
表示数をオーバーする項目については、ページングナビゲーションを操作することによって確認できるようにする。

各絞り込み条件は、横軸に複数選択する場合はor検索であり、縦軸に複数選択する場合はand検索とした。
つまり、横に条件を増やしていくと該当項目数は増し、縦に条件を増やしていくと該当する表示項目数は減少する。

外部データにXMLファイルでなくCSVファイルを採用することで、データ容量的にもマッチング処理上も表示速度向上を図っている。

ただし、CSVファイルの文字コードはUTF-8に設定する必要があり、
Shift JIS以外のCSVファイルはMicrosoft Excelで利用できないため運用上不都合な場合もあるが、
OpenOffice Calc などのツールを利用することで更新が可能である。