jquery - 加載後排序表數據

Question

我想訂購我的表中顯示的數據。所以條目在那裏正確的部分下面。

我正在通過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個

應該根據本條坐的條目有一個數據組的S:1所以任何S：1應該是MAIN下面：1

任何S：2的下方MAIN：2等..沒有數據組中的任何條目應該是下段與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'); 
    } 
}); 

這一次在頁面加載，似乎工作確定被調用。 有沒有比這更好的方法？

謝謝

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