多くの専門家も、自分で試してみたいという理由で、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(); として定義します。 >
コードをコピーします
コードは次のとおりです:
| 房号 | 日期 | 房间类型 | 床位 | 容量 | 价格/晚 | 合计 |
|---|---|---|---|---|---|---|
| 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 |
