divで作成したテーブル内のjQueryヘッダーのソート

Question

各列のヘッダーをクリックしてテーブルコンテンツをクリックしたいと思っています。

この質問は既にjQuery table header sortで作成されていますが、実際には非常に良いjqueryプラグインがテーブルのhtmlタグで機能しています。私のテーブルがdivで書かれている場合、そこにプラグインがありますか？

HTMLの例：あなたは、コードを自分で書いて動き回ることができない場合

<div class="table"> 
    <div class="header"> 
     <div class="col1">col1</div> 
     <div class="col2">col2</div> 
     <div class="col3">col3</div>   
    </div>  
    <div class="item"> 
     <div class="col1">content11</div> 
     <div class="col2">content21</div> 
     <div class="col3">content31</div>    
    </div> 
    <div class="item"> 
     <div class="col1">content12</div> 
     <div class="col2">content22</div> 
     <div class="col3">content32</div>    
    </div> 
</div> 

Answer 1

、基本的なプロセスは次のように自分がなり、これを書き込みます。痛みのように聞こえるかもしれませんが、あなたのデータがクリーンである場合は、jQueryのセレクタは本当にここにあなたを助けます：

• 反復してデータグリッドを各セル（行に固有の1、とに固有のものに2クラスを割り当てます列）。ネストされたループは、jQueryの.addClass()とともにそれを行います。後でこれらをjQueryセレクタとして必要とします。この繰り返しではテーブルヘッダーをインクルードしますが、ラベルに 'label'のクラスを割り当てます。

• テーブルヘッダーをそれぞれ$(".label")にすることができます。

• $(.label)をクリックすると、行または列のクラス名を取得し、一致するすべてのセルを選択します。この配列（html要素）を繰り返し処理し、各セルに含まれるデータの2番目の配列を作成します（.html()、おそらく）。この配列をソートし、それを元の配列の要素に再塗りつぶして使用します。

複雑なサウンドが聞こえるかもしれませんが、jQueryは本当にこのようなことのために構築されました。がんばろう。