テーブルを操作するプロセスでは、認識を容易にし、迅速な分析を行うため、遅かれ早かれ、これらのテーブルのソートされたコンテンツを出力するという疑問が生じます。 Webプログラミングのこの問題は、次の2つの方法で解決できます。
- SQLまたはバックエンドを使用したサーバー側の並べ替え。
- クライアント側の並べ替え。
最初のオプションの欠点は、並べ替えコントロールでユーザーがクリックするたびにページをリロードすることです。 長所-大きなサンプルのソート速度。
クライアント側の短所は比較的低速で、ブラウザとユーザーのコンピューターの能力に直接依存します。 プラスは、ページのリロードがないことです。したがって、ソートされたコンテンツをより高速に取得できる場合があります。 この場合、サーバーにリクエストを送信してから結果を受信するまでに遅延はありません。
この記事では、JavaScriptを使用したクライアント側のソートを検討します。
数値データ、時刻、日付、テキストなど、さまざまなタイプのデータの列がある表を見てみましょう。
最も適切な方法は、テーブル内のすべてのセルの内容を取得して並べ替えて配列に書き込み、並べ替えられた配列の順序に従って行を復元することだと思います。 このソートにはarray.sort（）メソッドを使用できます。
デフォルトでは、配列は昇順でソートされ、コンテンツはテキストとして扱われますが、array.sortメソッドには独自のハンドラーを使用できます。 したがって、この方法を使用する前に、初期データを準備する必要があります。
数値およびテキストデータは変更なしで配列に書き込まれます。
時間を数値に変換します。私の例では分です。
fastSortEngine.prototype.parseTime = function (tvalue) {
var ret = tvalue;
if (!tvalue) {
ret = this .nullValue;
} else {
tvalue = tvalue.split( ':' );
if (tvalue.length == 2) {
ret = parseInt(tvalue[0],10)*60 + parseInt(tvalue[1],10);
} else {
ret = this .nullValue;
}
}
return ret;
}
日付も数値に変換されます。 DateオブジェクトとgetTime（）メソッドを使用して、タイムスタンプをミリ秒単位で返します。
fastSortEngine.prototype.parseDate = function (dvalue) {
var ret = dvalue;
if (!dvalue) {
ret = this .nullValue;
} else {
dvalue = dvalue.split( ' ' );
if (dvalue.length == 3) {
var d = new Date(dvalue[2], this .months[dvalue[1].toLowerCase()], dvalue[0]);
ret = d.getTime();
} else {
ret = this .nullValue;
}
}
return ret;
}
したがって、独自のハンドラーを使用して、数値、日付と時刻を数値データとして並べ替え、array.sort（）の通常の呼び出しによってテキストを並べ替えます。
次に、これらの配列をテーブルオブジェクトと一致させる方法について説明します。 変換の前に、テーブルのすべての行にインデックスを付け、シリアル番号runiqueIDを割り当てます。 これは、重複する値を持つデータを並べ替えるときに、行番号として2番目の優先順位を設定するために必要です。 array.sort（）メソッドは、重みに従って配列をソートし、多次元配列を渡して、複数のフィールドでソートできます。 3次元配列を使用します。ゼロ要素は変換された値、最初の要素は行の序数、2番目の要素は行ノードです。 ハンドラーコードを以下に示します。
fastSortEngine.prototype.sortNumber = function (a,b) {
var a1 = a[0] == '' ? this .nullValue : parseFloat(a[0]);
var b1 = b[0] == '' ? this .nullValue : parseFloat(b[0]);
if (a1 == b1 && a[1] < b[1] ) return -0.0000000001;
else if (a1 == b1 && a[1] > b[1] ) return 0.0000000001;
return a1 - b1;
}
目的の型にキャストした後、ノードを配列要素に保存し、array.sort（）を呼び出します。逆の順序で並べ替える必要がある場合は、array.reverse（）も呼び出します。
var obj = [val,
rowObj.runiqueID,
rowObj];
dataCol.push(obj);
if ( this .colType == "text" ) dataCol.sort();
else dataCol.sort( this .sortNumber);
データがソートされると、テーブルツリーの行の位置をすでに変更できます。 ソートされた配列を調べ、以前に保存されたすべてのテーブル行ノードに対してappendChildを呼び出します。
var l = dataCol.length;
for ( var i = 0; i<l; i++) {
this .tBody.appendChild(dataCol[i][2]);
}
この方法は非常に高速です ソートの際、テーブルノードはappendChildの順次呼び出しによって最後にのみ再配置されます。
実際の例を
表示し 、ソースコードを
ダウンロードします 。
UPD：結果のキャッシュを追加し、コードをわずかに最適化しました。 また、この例には現在500行あります。
最適化されたバージョンと
ソースコード 。