Jquery - ロード後のテーブルデータのソート

Question

テーブルに表示されているデータを注文したいと思います。したがって、正しいセクションの下にエントリ 'sit'があります。

私はLDAP経由でデータベースADからデータを取得しています。これは、そのようにのような表に画面に提示されます。..

<tr id="MAIN:1" class="group_heading nodrag"><td colspan="4">MAIN1</td></tr> 

<tr id="1" class="toggler_row" data-group="S:1" style="cursor: move;"> 
    <td><input name="local[]" type="text" value="54-A944"></td> 
    <td><input name="description[]" type="text" value="MidWest"></td> 
</tr> 

<tr id="8" class="toggler_row" data-group="S:2" style="cursor: move;"> 
    <td><input name="local[]" type="text" value="16-B120"></td> 
    <td><input name="description[]" type="text" value="SouthEast"></td> 
</tr> 

<tr id="2" class="toggler_row" data-group="" style="cursor: move;"> 
    <td><input name="local[]" type="text" value="12-B879"></td> 
    <td><input name="description[]" type="text" value="South"></td> 
</tr> 


<tr id="MAIN:2" class="group_heading nodrag"><td colspan="4">MAIN2</td></tr> 

<tr id="6" class="toggler_row" data-group="S:2" style="cursor: move;"> 
    <td><input name="local[]" type="text" value="79-C878"></td> 
    <td><input name="description[]" type="text" value="LOCAL"></td> 
</tr> 

<tr id="5" class="toggler_row" data-group="S:1" style="cursor: move;"> 
    <td><input name="local[]" type="text" value="82-A942"></td> 
    <td><input name="description[]" type="text" value="SouthWest"></td> 
</tr> 

セクションheaderエントリはこれに似ています

<tr id="MAIN:1" class="group_heading nodrag"><td colspan="4">MAIN1</td></tr> 

彼らは、セクション番号などが続くMAINを開始するIDを持っています1 MAINの下でなければならない：このセクションの下に座るべき1つの

エントリがので、任意のSはS:1のデータグループを有する1

どれS：MAINの下に2：2のようにして...ノーデータ・グループとの任意のエントリは、テーブルのエントリをIループを行うと、正しい場所に移動する方法ID NONE

のセクションの下でなければなりません？

多くのMAINセクションと可能なロットのサブエントリがあります。

アイデア？

UPDATE 私が使用してこの作業を持っている：

$("tr.toggler_row").each(function() { 
    var id = $(this).prop('id'); 
    var group = $(this).data('group'); 
    var arr = group.split(':'); 
    if (arr[1]) { 
     $('#' + id).insertAfter('#MAIN\\:' + arr[1]); 
    } else { 
     $('#' + id).insertAfter('#NONE'); 
    } 
}); 

ページがロードされ、[OK]を動作しているようですしたらこれが呼び出されています。 そこより良い方法はありますか？

おかげ

Answer 1

私の理解に基づいて

私は、これはあなたが探しているものだと思います。テーブル行をソートするには、ソートボタンをクリックします。このよう

$(document).ready(function() { 
 
    function getAttributesString(element) { 
 
    var AttrString = ""; 
 
    $.each(element.attributes, function() { 
 
     if(this.specified) { 
 
      AttrString += " " + this.name + "='" + this.value + "' "; 
 
     } 
 
    }); 
 
    return AttrString; 
 
    } 
 
    
 
    function getRowHTML(element){ 
 
     var html = ""; 
 
    \t \t html += '<tr ' + getAttributesString(element) + ' >'; 
 
     html += $(element).html(); 
 
     html += "</tr>"; 
 
     return html; 
 
    } 
 
    
 
    $("#Sort").click(function(){ 
 
     var sortedHtml = ""; 
 
     sortedHtml += "<table>"; 
 
     $("table tr[id^='MAIN:']").each(function(){  
 
     \t \t sortedHtml += getRowHTML(this); 
 
      var headerId = this.id.split(':')[1]; 
 
      if (headerId != "") { 
 
      $("table tr[data-group='S:" + headerId + "']").each(function(){ 
 
       sortedHtml += getRowHTML(this); 
 
      }); 
 
      } 
 
      else { 
 
      $("table tr[data-group='']").each(function(){ 
 
       sortedHtml += getRowHTML(this); 
 
      }); 
 
      } 
 
     }); 
 
     sortedHtml += "</table>"; 
 
     $("#container").html(""); 
 
     $("#container").html(sortedHtml); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
<table> 
 
<tr id="MAIN:1" class="group_heading nodrag"><td colspan="4">MAIN1</td></tr> 
 

 
<tr id="1" class="toggler_row" data-group="S:1" style="cursor: move;"> 
 
    <td><input name="local[]" type="text" value="54-A944"></td> 
 
    <td><input name="description[]" type="text" value="MidWest"></td> 
 
</tr> 
 

 
<tr id="8" class="toggler_row" data-group="S:2" style="cursor: move;"> 
 
    <td><input name="local[]" type="text" value="16-B120"></td> 
 
    <td><input name="description[]" type="text" value="SouthEast"></td> 
 
</tr> 
 

 
<tr id="2" class="toggler_row" data-group="" style="cursor: move;"> 
 
    <td><input name="local[]" type="text" value="12-B879"></td> 
 
    <td><input name="description[]" type="text" value="South"></td> 
 
</tr> 
 

 

 
<tr id="MAIN:2" class="group_heading nodrag"><td colspan="4">MAIN2</td></tr> 
 

 
<tr id="6" class="toggler_row" data-group="S:2" style="cursor: move;"> 
 
    <td><input name="local[]" type="text" value="79-C878"></td> 
 
    <td><input name="description[]" type="text" value="LOCAL"></td> 
 
</tr> 
 

 
<tr id="5" class="toggler_row" data-group="S:1" style="cursor: move;"> 
 
    <td><input name="local[]" type="text" value="82-A942"></td> 
 
    <td><input name="description[]" type="text" value="SouthWest"></td> 
 
</tr> 
 

 
<tr id="MAIN:" class="group_heading nodrag"><td colspan="4">Others</td></tr> 
 
</table> 
 
</div> 
 
<br> 
 
<button type="button" id="Sort"> Sort </button>

Fiddle

は