jquery_jquery に基づいたテーブルの並べ替え

多くの専門家も、自分で試してみたいという理由で、jquery 用の特別なソート ライブラリを作成しました。
もちろん、実行速度は本当に許容範囲外ですが、徐々に改善していきます。
注: ここにあるのはコードの一部です。デモを確認してください。
ドキュメントが読み込まれた後、クリック イベントを「th」に追加します。
1.
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr( 'dataType');
クリックされたオブジェクトのカスタム属性 dataType を検索します。 もちろん、これは W3C 規格に準拠していないため、ID またはクラスで定義することもできますが、これが直感的なポイントだと思います。移行モードでも使用できます。
2.
varindex=$('th').index(this) 1;
ドキュメント内でクリックされたオブジェクトの位置を検索します。 1 を追加することは、クリックされたオブジェクトの位置を与えることです。これは、対応する列の td にスタイルを追加することで行われます。
:eq() を使用すると、td の完全なドキュメント位置しか取得できません。 :nth-child() を使用すると、独自の親要素内の各 td を取得できます。
var row=$('tbody tr');
tbody 内のすべての tr を変数 row に保存します。 .
4.
$.each(row, function(i){ arr[i]=row[i] })
すべての行を走査し、それを arr 配列に挿入します。 >5.if($(this).hasClass('select')) {arr.reverse()}
この 'th' がクリックされている場合、選択スタイルが追加されます。元の arr 配列は直接反転されます。
arr.sort(sortStr(index,dataType))
$('.select').removeClass(); :nth-child(' index ')').addClass(' select');
$(this).addClass('select')
}
それ以外の場合は、sort() メソッドを使用して arr をソートしますsort() メソッドは 1 つの関数を受け入れ、この関数は 2 つの関数を受け入れます。比較する必要があるデータとして、ここでは 2 つのパラメータを持つ
sortStr(); として定義します。 >


コードをコピーします


コードは次のとおりです:

function sortStr(index,dataType){ return function( a,b){ var aText=$(a).find(' td:nth-child(' インデックス ')').text(); var bText=$(b).find(' td:nth-child(' インデックス ')').text(); if(dataType!='roomType'){ aText=Parse(aText,dataType)

bText=Parse (bText,dataType)

return aText>;bText?-1:bText>

}
else return aText.localeCompare(bText)
>}



最初の変数は、クリック イベントで取得される変数です。この変数には、ドキュメント内でクリックされた「th」の位置 (数値) が含まれます。
Jquert の Index() メソッドはオブジェクトの位置を取得します。この位置は 0 から始まり、この例では 6 番目があります。

2 番目のパラメーターは、それぞれの属性値を含みます。 「th」。

sortStr() には比較関数が含まれています。この関数は 2 つのパラメーターを持ち、各パラメーターは 'tbody tr' を表します (ここで、a と b は比較する必要がある tr を表します)。これら 2 つのパラメータは、それらを含む関数環境で取得されます。sort() メソッドのパラメータは、配列オブジェクトの要素を取得します。
この匿名関数は、演算配列 Quote を返します。
arr には配列が含まれます。各配列の値には tbody の tr への参照が含まれます。ソート関数は、戻り値に従って元の配列内の要素の位置を直接変更します。 $(a).find('td:nth-child('index')').text();

比較する必要がある行のいずれかの tds に含まれるテキストを取得します。
クリックイベントで取得されたインデックス変数は、




Copy に対応する td の位置を取得するためにここに渡されます。 code


コードは次のとおりです:


if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText =Parse(bText,dataType)

return aText>;bText?-1:bText>;aText?1:0; } 並べ替える必要がある型が数字と文字が含まれていない場合 (roomType 値があるため、要素には数字と文字が含まれています)、取得した td のテキスト値と dataType を Parse() に渡して変換します。

コードをコピー


コードは次のとおりです:

function Parse(data,dataType){
switch(dataType){
case 'num':

return parseFloat(data )||0 case 'date': return Date.parse(data)||0 default : return splitStr(data) } }

数値型が浮動小数点数に直接変換される場合、

return parseFloat(data)||0
Boone の変換オブジェクト文字列が表示される場合、このドキュメントには NaN が含まれるため 0 を返します。変換できないため、0 が返されます。

日付型の場合は、Date.parse を使用して直接数値に変換できます。この変換は、1970 年から変換パラメーター これは秒まで正確な時間変換を試しました。たとえば、1971/01/2 18:12:20、01/2/1970 18:12:20 は
に変換できます。
return aText>;bText?-1:bText>;aText?1:0;
aText が bText より大きい比較値を返します。逆に、正の数を返します。どちらにも当てはまらない場合は、0 を返します。 ; 日付でも数値でもない場合 (現在、このドキュメントでは 3 種類のデータのみを変換できます: 1. 日付、2. 数値、3. 文字列と数値の組み合わせ)、
デフォルト:
return splitStr(data )
変換のためにsplitStr()に入れました

splitStr()の内容は次のとおりです:

コードをコピー コードは次のとおりです:

function splitStr(data){

var re=/^[$a-zA -zu4e00-u9fa5 ]*(.*?)[a-zA -zu4e00-u9fa5 ]*$/
data=data.replace(re,'$1')
return parseFloat(data)
}


正規表現: 3 つの部分に分かれています 1 つの部分 ^[a-zA-Z]*; 最後の部分 [a-zA-Z]*$

次のように見ることができます/ /これは包含ブロックです。
最初の部分 ^ はターゲット文字列の先頭を意味し、[] は大文字と小文字に関係なく無視されることを意味し、その中にスペースが含まれています *
中央の部分 () はグループであり、グループ化されたコンテンツは RegExp '$1', '.' の最初の項目に配置されます。すべてに一致します (スペースを除く) *? 怠惰な方法です。
最後の部分 [] は次の * と最初の部分と同じです。 すべての文字が削除されます。
$ は一致する $ 記号を表します。 🎜>

コードをコピーします コードは次のとおりです。 function sortStr(index,dataType){

return function(a,b){

var aText=$(a).find('td:nth-child('index')' ).text();
var bText=$(b ).find('td:nth-child('index')').text();
if(dataType!='roomType'){
aText=Parse(aText,dataType)
bText =Parse(bText,dataType)
return aText>;bText?-1:bText>;aText?1:0;
}
else return aText.localeCompare(bText)
}
}


それ以外の場合は、localeCompare を比較に直接使用します。これは、次のような文字列を比較するための特別なメソッドです。数値は依然として 0 より大きい数値、負の数値、および 0 です。

コードの先頭の新しい日付と最後の新しい日付は、テーブルのソート時間で計算され、この時間は「スパン」に表示されます。真ん中の「th」のマーク これは、ソートの開始からソートの終了までのテーブル全体のソートにかかる時間をテストするためのものです。

完全なコード:

コードをコピー コードは次のとおりです:

返回文章

房号	日期	房间类型	床位	容量	价格/晚	合计
u0628	9/14/2008	Std Hotel Room 2 Double (27 left)	2	4 人	$109.00	$436.00
u0631	10/4/2008	Lodge Rm/Shared Bath Q (4 left)	1	2 人	$109.00	$436.00
u0636	9/18/2008	Std Hotel Room Q (34 left)	1	2 人	$117.00	$466.00
u0638	9/19/2008	Std Hotel Room 2 Q (28 left)	2	4 人	$117.00	$466.00
u0612	9/1/2008	Studio Condo (10 left)	1	4 人	$149.00	$596.00
u0626	9/13/2008	Hotel Jr Suite K (4 left)	1	2 人	$149.00	$596.00
u0641	9/22/2008	Hotel Superior K (26 left)	1	2 人	$149.00	$596.00
u0602	8/31/2008	1 Bdrm Condo K (96 left)	1	4 人	$169.00	$676.00
u0616	10/8/2008	Studio Condo Murphy (5 left)	NaN	4 人	$169.00	$676.00
u0623	10/2/2008	Studio Cabin Q (6 left)	1	2 人	$169.00	$676.00
u0633	9/16/2008	Studio Q/Murphy (6 left)	2	4 人	$169.00	$676.00
u0637	10/5/2008	Lodge Room Q (4 left)	1	2 人	$169.00	$676.00
u0622	9/11/2008	Hotel Loft Ste K/Q (3 left)	2	4 人	$179.00	$716.00
u0629	10/10/2008	1 Bdrm Condo K (76 left)	1	4 人	$179.00	$716.00
u0603	9/8/2008	Hotel Loft K/Q (16 left)	2	4 人	$189.00	$756.00
u0632	9/15/2008	Hotel Loft K/2T (15 left)	3	4 人	$189.00	$756.00
u0619	10/1/2008	Studio Cabin Firepl K (6 left)	1	2 人	$209.00	$836.00
u0608	10/7/2008	1 Bdrm Condo with Den K (1 left)	1	6 人	$222.00	$886.00
u0620	9/5/2008	2 Bdrm Condo K/K (25 left)	2	6 人	$229.00	$916.00
u0630	9/7/2008	2 Bdrm Condo K/2T (57 left)	3	6 人	$229.00	$916.00
u0634	10/11/2008	2 Bdrm Condo K/Q (88 left)	2	6 人	$229.00	$916.00
u0639	9/20/2008	1 Bdrm K/Murphy (19 left)	2	4 人	$229.00	$916.00
u0614	9/2/2008	2 Bdrm Townhome (7 left)	2	4 人	$239.00	$956.00
u0610	9/10/2008	1 Bdrm Loft K/Q+2T/Murphy (5 left)	5	8 人	$269.00	$1076.00
u0625	9/12/2008	2 Bdrm K/Q/Murphy (6 left)	3	6 人	$269.00	$1076.00
u0640	9/21/2008	Exec. 2 Bdrm K/2Q/Murphy (2 left)	4	8 人	$269.00	$1076.00
u0606	9/26/2008	2 Bdrm Cabin K/Q+T (2 left)	3	5 人	$279.00	$1116.00
u0613	9/29/2008	Lodge 2 Bdrm Suite Q/Q (1 left)	2	4 人	$279.00	$1116.00
u0624	10/3/2008	1 Bdrm Cabin Firepl K (3 left)	1	4 人	$279.00	$1116.00
u0618	9/4/2008	2 Bdrm Condo w/Den Custom (1 left)	2	6 人	$329.00	$1316.00
u0627	10/9/2008	3 Bdrm Condo K/Q/Q (6 left)	3	8 人	$339.00	$1356.00
u0642	9/23/2008	2 Bdrm Cabin Firepl K/Q+T (1 left)	3	7 人	$339.00	$1356.00
u0615	9/3/2008	3 Bdrm Condo K/Q/2T (2 left)	4	8 人	$379.00	$1516.00
u0607	9/9/2008	2 Bdrm. Loft K/Q/Q,3T/SS (9 left)	6	11 人	$389.00	$1556.00
u0609	9/27/2008	Dlx 1 ベッドルーム キャビン Firepl K (残り 3 室)	1	4人	$389.00	$1556.00
u0635	2008/9/17	エグゼクティブ 2 ベッドルーム ロフト K/K/2Q/SS (残り 1 つ)	4	10人	$399.00	$1596.00
u0621	2008 年 9 月 6 日	ベッドルーム 3 室のタウンホーム (残り 3 件)	3	6人	$409.00	$1636.00
u0601	2008/9/24	3 ベッドルーム キャビン K/Q T/2T (残り 1 つ)	5	9人	$469.00	$1876.00
u0605	2008 年 9 月 25 日	Dlx 1Bd Loft,K,Q/T firepl (残り 1 つ)	3	6人	$469.00	$1876.00
u0611	2008/9/28	Dlx 2 Bdm Cbn Firepl K/2T (残り 3 つ)	2	6人	$469.00	$1876.00
u0604	2008 年 10 月 6 日	デラックス 3 ベッドルーム コンドミニアム K/Q/Q (残り 2)	3	8人	$499.00	$1996.00
u0617	2008/9/30	Dlx3Bdm/2Bth/FP/K/QT/QT (残り 1 個)	5	8人	$549.00	$2196.00