テーブルのようなdivの並べ替えを作る

Question

私はdivsのページにレイアウトされているデータを持っていて、メインのdivはオートスクロールに設定されています。ここで私が持っているものの簡単な例：

http://troycomptonworld.com/sorting

今私は、ユーザーが列名（最初の名前、給与など）のいずれかにクリックした場合のdivの昇順または降順にソートする機能を追加する必要があります。どのようにjQuery/javascriptでこれを行うことができますが、私の他のすべての機能（つまり、自動スクロールとカラムヘッダーはフリーズしています）を維持できますか？

Answer 1

通常はjQuery UIを提案しますが、テーブルをUIに追加します。

はjQueryのためにこのプラグインを見てみましょう：

http://datatables.net/

あなたが探しているソートのタイプのためのデータグリッドのプラグインのいくつかの並べ替えを使用するようにするつもりです。

少なくとも、サイトに移動し、ソートの関数呼び出しをどのように行うかを調べます。乾杯。

Answer 2

tinysortをお勧めしますか？

Answer 3

まず、データをよりよく表現するためにHTMLをレイアウトすることをおすすめします。今は、セルを表す複数のdivが順番にあります。それらを行に分割する唯一の情報はスタイルです。一般的には、HTMLの構造がデータの構造を表現するようにします（CSSをオフにしてページを見てみてください）。

私は、それをレイアウトすることを好むだろう、それが表形式のデータであるため、<thead>、<tfoot>と<tbody>と実際のHTMLテーブルを使用するようになり、その後、特定のことをTBODYにスタイルを設定する方法スクロールで高さ。

これは、古いブラウザでは機能しないという問題です。私はブラウザの互換性のためのあなたの要件が何であるか分かりません。

もしあなたが<div>に固執しようとしているならば、少なくとも各行の周りに含まれているdivを貼り付けてください。

特定の要素の各子が行を表す構造を作成したら、並べ替えは簡単です。すべての要素をつかみ、配列に貼り付けることができます。ソートしてDOMに戻します。

ヘッダー内のすべてのセルも何らかの並べ替えのコンテナにある場合（可能であれば、<tr>の<th>）、クリ​​ックしたそのコンテナ内の子のインデックスを把握することができます。各行に同じ索引を持つ子の値を使用して行をソートします。

Answer 4

DatatablesとTinysortが重すぎます。彼がすでにメンテナンスしているので、私は@ SpoonMeiserに完全に同意します。だから私はあなたにテーブルをお勧めしたい。私は実際にこれを書いた人覚えていないjsが、申し訳ありませんが、私は自分のニーズに合わせて少し、このコードを編集し、ここにある：

(function(){ 
    var a_re = /[cdu]\_\d+\_[cdu]/ 
    function hc(s, c){return (" " + s + " ").indexOf(" " + c + " ") !== -1} 
    prepTabs = function (t) { 
     var el, th, ts = (t && t.className) ? [t] : document.getElementsByTagName("table") 
     for (var e in ts) { 
      el = ts[e] 
      if (hc(el.className, "sortable")) { 
       th = el.tHead 
       th.onclick = clicktab 
       el.sorted = NaN 
      } 
     } 
    } 
    var clicktab = function (e) { 
     e = e || window.event 
     var obj = e.target || e.srcElement 
     while (!obj.tagName.match(/^(th)$/i)) obj = obj.parentNode 
     var i = obj.cellIndex, t = obj.parentNode 
     while (!t.tagName.match(/^table$/i)) t = t.parentNode 
     var cn = obj.className, verse = /d\_\d+\_d/.test(cn), dir = (verse) ? "u" : "d", new_cls = dir + "_1_" + dir 
     if (a_re.test(cn)) obj.className = cn.replace(a_re, new_cls) 
     else obj.className = new_cls 
     var j = 0, tb = t.tBodies[0], rows = tb.rows, l = rows.length, c, v, vi, si, arr 
     if (i !== t.sorted) { 
      t.sarr = [] 
      for (j; j < l; j++) { 
       c = rows[j].cells[i] 
     v = (c) ? (c.innerHTML) : "" 
     v = v.match(/txt-edit/mi) && (arr = v.match(/ value="(.+)"/mi)) ? arr[1] : v; 
     v = v.match(/select-indot/mi) && (arr = v.match(/selected="selected">(.+)/mi)) ? arr[1] : v; 
       vi = Math.round(100 * parseFloat(v)).toString() 
     if (!isNaN(vi)) while (vi.length < 10) vi = "0" + vi 
       else vi = v 
       t.sarr[j] = [vi + (j/1000000000).toFixed(10), rows[j]] 
     } 
     } 
    t.sarr = t.sarr.sort() 
     if (verse) t.sarr = t.sarr.reverse() 
     t.sorted = i 
     for (j = 0; j < l; j++) tb.appendChild(t.sarr[j][1]) 
    } 
    window.onload = prepTabs 
})() 

JSFIDDLE

UPDATE：

CSS

col {overflow:hidden !important;} 
THEAD TD {background:#000;} 
.sortable {clear:both;border-collapse:collapse;} 
.sortable td, .sortable th {border:1px solid #000;padding:0 9px 0 9px;} 
.sortable TBODY TR:hover {background-color:#ffe;} 
.sortable .even {background-color:#f0f0f0;} 
.sortable .odd {background-color:#fff;} 
.sortable thead {cursor:pointer;} 

/* arrows */ 
.c_0_c TH { 
background:url(images/c1.gif) no-repeat right center; 
background-color:#eee; 
} 
.c_0_c .d_1_d { 
background:url(images/d10.gif) no-repeat right center; 
background-color:#eee; 
} 
.c_0_c .u_1_u { 
background:url(images/u10.gif) no-repeat right center; 
background-color:#eee; 
} 

c1.gif

d10.gif

u10.gif