Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

名前順に並べ替えてテーブルを表示する

JAVA Scriptを使用すると、データベースから読み込んで表示したテーブルの各行を指定した方法で並べ替えることができます。ここでは、職員名簿のテーブルを、職員ID順、名前順などの読みの順によって、並べ替えて表示する方法について考えてみましょう。

■ 並べ替えボタンの配置

カタログページに、並べ替えを行うためのボタンを配置し、並べ替えを行う際に基準とする項目の指定をします。

<INPUT ID="SortID" CLASS="btn" TYPE="button" VALUE="職員ID順" onMouseDown="DataSort('no')">
<INPUT ID="SortSyurui" CLASS="btn" TYPE="button" VALUE="職員氏順" onMouseDown="DataSort('fhname')">

例では、「職員ID順」「名前順」の2つのボタンを置いています。
■ 並べ替えの処理

並べ替えを行うためのJAVA Scriptを記述し、テーブルの各行で指定された項目の読みの順に従って並べ替えます。

function DataSort(Col){
list.SortColumn = Col;
list.Reset();
}

■ 「SortColumn」プロパティと「Reset」メソッド

「Table Data Control」オブジェクトを使用して並べ替えを行うには、「SortColumn」プロパティに並べ替えの基準とする項目を設定した後、「Reset」メソッドでテーブルを再表示させます。
並べ替えは、表のような順序で行われ、同じ種類の文字でも半角と全角の文字では異なる順に並べられるので注意が必要です。例えば、「サトウ」(半角)と「シオ」(全角)では、「シオ」の方が先になります。これを防ぐには、データベースの作成時に全角か半角かのどちらかに文字を統一して入力するようにします。

順序
文字
1
半角数字
1
2
半角記号
"
3
半角英字
A
4
全角ひらかな
5
全角カタカナ
6
漢字
7
全角記号
8
全角数字
9
半角カタカナ

■ 漢字の読みの順

例の方法で並べ替えを行うと、アルファベットはABC順(大文字→小文字の順)、ひらかなとカタカナはあいうえお順、漢字は漢字コードの順に並べられます。このため、漢字のよみの順に並べ替えを行わせたい場合は、「読みがな」の項目を別に用意してデータを入力しておく必要があります。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box